/* ============================================================
that'sbetter — Design System · theme.css (v1.0)
Single source of truth. Import this once, globally, then
restyle existing components with the classes below.
Fonts (add to before this file):
============================================================ */
:root {
/* ---- Neutrals (warm) ---- */
--c-bg: #FAFAF7;
--c-surface: #FFFFFF;
--c-surface-2: #F3F3EE;
--c-surface-3: #ECEBE4;
--c-border: #E6E4DC;
--c-border-2: #D6D4C9;
--c-text: #17170F;
--c-text-2: #5E5D52;
--c-text-3: #93917F;
/* ---- Brand · orange ----
Primary buttons fill with --c-accent (the deepened #f05e0a clears
contrast for bold/large button text, ~3.3:1) and DARKEN to --c-accent-dk
on hover. Use --c-accent for eyebrows, links, icons, the dot, borders,
and active states too. (Updated 16au — was --c-accent-dk fills.) */
--c-accent: #f05e0a; /* deepened from #F5811A (Adrian, 16aq) */
--c-accent-hi: #FCA021;
--c-accent-dk: #C54D08; /* button fills, hover, deep surfaces — matched to the deeper accent */
--c-accent-ink: #7A3408; /* text on tint */
--c-accent-tint: #FCDFC4;
--c-accent-tint2: #FEF0E2;
--c-accent-tint-bd:#F8C9A2; /* border on tint chips/buttons */
/* ---- Heat ramp · persona fit (hot → cold) ---- */
--c-hot: #f05e0a; /* 80–100 */
--c-warm: #F4A22B; /* 60–79 */
--c-cool: #D29429; /* 35–59 */
--c-cold: #A38B73; /* 0–34 */
/* ---- Campaign / Reddit surface ---- */
--c-reddit-bg: #E9ECF0;
--c-reddit-surface: #FFFFFF;
--c-reddit-border: #DCE0E6;
/* ---- Semantic ---- */
--c-positive: #F5811A; /* shares the accent; swap to a green if you want a distinct success */
--c-warning: #B9892F;
--c-danger: #B23A3A;
--c-info: #3A6DB2;
/* ---- Focus / selection ---- */
--ring: 0 0 0 3px rgba(240,94,10,.18);
--ring-error: 0 0 0 3px rgba(178,58,58,.14);
/* ---- Type ---- */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-ui: 'Hanken Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--fs-display: 56px; --lh-display: 1.02; --ls-display: -.03em;
--fs-3xl: 42px; --lh-3xl: 1.05; --ls-3xl: -.025em;
--fs-2xl: 33px; --lh-2xl: 1.1; --ls-2xl: -.02em;
--fs-xl: 26px; --lh-xl: 1.2; --ls-xl: -.01em;
--fs-lg: 21px; --lh-lg: 1.3;
--fs-md: 18px; --lh-md: 1.55;
--fs-base: 16px; --lh-base: 1.55;
--fs-sm: 14px; --lh-sm: 1.5;
--fs-label: 12px; --ls-label: .16em; /* mono · uppercase */
/* ---- Spacing · 4px grid ---- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
--s-20: 80px; --s-24: 96px;
/* ---- Radius ---- */
--r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
/* ---- Elevation (warm-tinted, low spread) ---- */
--e-1: 0 1px 2px rgba(23,23,15,.05);
--e-2: 0 2px 8px -2px rgba(23,23,15,.08);
--e-3: 0 12px 32px -8px rgba(23,23,15,.16);
/* ---- Motion ---- */
--ease-out: cubic-bezier(.2,.8,.2,1);
--dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms;
}
/* ============================================================
BASE
============================================================ */
body {
margin: 0;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-ui);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
}
::selection { background: #FACFAB; color: var(--c-accent-ink); }
a { color: var(--c-accent); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--c-accent-dk); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.t-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-3xl); letter-spacing: var(--ls-3xl); }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-2xl); letter-spacing: var(--ls-2xl); }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: var(--ls-xl); }
/* mono eyebrow / metadata label */
.eyebrow, .label {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-accent);
}
.label--muted { color: var(--c-text-3); }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-2); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: var(--s-2);
font-family: var(--font-ui); font-size: 14.5px; font-weight: 600;
border: 1px solid transparent; border-radius: var(--r-sm);
padding: 10px 18px; cursor: pointer;
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn--sm { font-size: 13px; padding: 6px 13px; border-radius: 7px; }
.btn--primary { color: #fff; background: var(--c-accent); border-color: var(--c-accent); box-shadow: var(--e-1); }
.btn--primary:hover { background: var(--c-accent-dk); border-color: var(--c-accent-dk); }
.btn--secondary { color: var(--c-text); background: var(--c-surface); border-color: var(--c-border-2); }
.btn--secondary:hover { background: var(--c-surface-2); }
.btn--ghost { color: var(--c-accent); background: transparent; }
.btn--ghost:hover { background: var(--c-accent-tint2); }
.btn--tint { color: var(--c-accent-ink); background: var(--c-accent-tint); border-color: var(--c-accent-tint-bd); }
.btn--danger { color: #fff; background: var(--c-danger); border-color: var(--c-danger); }
.btn:disabled, .btn--disabled { color: var(--c-text-3); background: var(--c-surface-3); border-color: var(--c-border); cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text-2); cursor: pointer; }
/* Bare