/* ============================================================================ Burgondy — Design Tokens (single source of truth) 0.1.197 ---------------------------------------------------------------------------- Anchored on the APP's palette (the agreed source of truth). Both the app (/app/) and the marketing site (root index.html + about/privacy/terms) this file BEFORE their own CSS. Backgrounds are intentionally per-surface: the app shell stays a solid --bg; every marketing page AND the in-app plans overlay share --bg-canvas, so the plans screen reads as the same surface as the homepage in both places (0.1.433 — the old --bg -> --bg-bottom homepage gradient was retired then, and --bg-bottom deleted with it; recover from git if ever wanted). Everything else — brand color, borders, ink, radius, shadow, spacing, type — is shared. MIGRATION NOTE (0.1.197): this file is live, but the app's styles.css still defines its own :root, so where names overlap the app values still win for now (e.g. --muted stays #6b7280 app-wide until the rollout). The NEW tokens here (--radius-btn/-card, --shadow-card, spacing, type) are already in use by the migrated buttons + cards. Rolling the rest across is the next step. ============================================================================ */ :root { /* ── Brand & neutrals ────────────────────────────────────────────── */ --burgundy: #6C011B; /* primary. 0.1.656: was #611A1E. 12.67:1 on white, and white text on it is the same, so it works as a fill and as text. */ --mustard: #D29A41; /* accent; "Most popular" tag. 0.1.443 - the app-scoped copy was deleted in 0.1.427 as orphaned, and the homepage kept its own --hp-mustard. The plans content is shared by the app AND pricing.html, so it needs a value both can see. --hp-mustard now aliases this. */ --mustard-text: #8A6318; /* 0.1.615: the ONLY mustard usable as TEXT. --mustard is 2.49:1 on white and --mustard-lt is 1.79:1; both fail AA badly. This one is 5.41:1 and is already the resume accent swatch, so it is not a new colour. */ --mustard-lt: #D9BE93; /* 0.1.456: soft mustard, fills the selected step-chip circle. Sampled from the owner's target and NOT a tint of --mustard (no single alpha over white reproduces it), so it is its own value, named like --green-lt. */ --burgundy-hover: #570116; /* 0.1.656: ~20% darker than --burgundy */ --bg: #ffffff; /* app solid background. Owner-set 08-08. APP ONLY - the marketing site uses --bg-canvas (#F2F0EB) and is unaffected. Was #F9F6F7; the app had been overriding it to white on `body` since before 0.1.628, so this restores what the app always rendered while keeping ONE declaration site. */ --bg-canvas: #F2F0EB; /* marketing canvas + in-app plans overlay (0.1.433) */ --white: #ffffff; /* cards / surfaces */ --surface: #f9fafb; /* subtle raised surface */ --hover: #F3F4F6; /* 0.1.656: NEUTRAL. Was #FAF6F7, a warm tint that read pink against the app's white background. This is the value beta shipped before the tokens were unified. */ /* Lines are MONOCHROMATIC: alpha black, never a warm hex. An alpha rather than a hex on purpose, so one declaration sits correctly on the white app background AND the #F2F0EB marketing canvas. TWO deliberate weights, owner-set 0.1.642: --border .10 the app (denser UI, lighter line reads calmer) --border-marketing .20 the marketing site (larger, sparser layout) Both live HERE. home.css points --hp-rule at --border-marketing rather than holding its own copy — the split is intentional, not the accidental drift that 0.1.641 fixed. */ --border: rgba(0,0,0,.1); --border-marketing: rgba(0,0,0,.2); /* marketing site lines only */ --border-strong: rgba(0,0,0,.35); /* 0.1.658: focused field border. Neutral, not the brand colour - a burgundy ring on a form reads as an error state, because red-adjacent borders mean "wrong" everywhere else. Same 1px weight as the resting border, just darker, so focus is a change in value rather than in colour or size. */ --border-focus: rgba(0,0,0,.6); /* 0.1.641: was #B1A697 (warm). Controls sitting directly on a canvas, where --border is too faint to read as a boundary. Still below the WCAG 1.4.11 3:1 floor; owner- accepted, see DESIGN_SYSTEM.md. */ /* 0.1.444: the editorial column rules. Same values the homepage uses, moved here so the in-app plans overlay can draw them too -- --hp-rule/--hp-edge are scoped to .hp/.site-nav-host and are invisible from inside /app/. */ --rule: var(--border); /* app hairlines. Alias, not a second value. */ --col-max: 1300px; /* editorial column width; matches --hp-max */ --col-edge: max(0px, calc(50% - (var(--col-max) / 2))); --border2: var(--border); /* RETIRED (was #d1d5db) -> now = --border */ --ink: #111827; /* primary text */ --ink2: #374151; /* secondary text */ --muted: #6E6064; /* warm brand muted */ --dim: #9ca3af; /* faint text */ /* ── Legacy aliases (existing app CSS still references these; migrate to --burgundy over time) ── */ --teal: var(--burgundy); --teal-lt: #f5f5f5; --teal-mid: #e5e5e5; --teal-dark: var(--burgundy-hover); --teal-dim: #a0a0a0; /* ── Semantic ────────────────────────────────────────────────────── */ --red: #dc2626; --red-lt: #fef2f2; /* 0.1.615: semantic alias. Forms and validation use --error, not --red, so a future change to error styling does not have to hunt through every red in the app. Same value: 4.83:1 on white, passes AA. */ --error: var(--red); --error-lt: var(--red-lt); /* 0.1.660: status colours for text and icons ON THE CANVAS (#F2F0EB). The base --red, --green and the What changed green (#2F7D5B) all FAIL AA there: 4.24, 2.89 and 4.38 against a 4.5 floor. These are the same hues darkened until they pass, so a toast is readable on the surface it sits on. --mustard-text already passes at 4.75 and is reused unchanged. */ --status-success: #2A7052; /* 5.21:1 on --bg-canvas */ --status-error: #B3261E; /* 5.74:1 on --bg-canvas */ --status-info: var(--mustard-text); /* 4.75:1, the What changed mustard */ --green: #16a34a; --green-lt: #f0fdf4; --amber: #d97706; --amber-lt: #fffbeb; --blue: #2563eb; --blue-lt: #eff6ff; /* ── Homepage-name aliases (so the shared home.css nav resolves in the app too) ── */ --accent: var(--burgundy); --accent-hover: var(--burgundy-hover); --line: var(--border); --ink-soft: var(--ink2); --on-accent: var(--white); /* ── Button sizing (design-system) ── */ --btn-h: 44px; --btn-fs: 14px; --btn-h-sm: 36px; --btn-fs-sm: 13px; --container-max: 1280px; --container-pad: 24px; --radius-md: 16px; /* ── Radius ──────────────────────────────────────────────────────── */ --radius-card: 8px; --radius-btn: 4px; --radius-pill: 999px; --radius: 8px; /* legacy alias = --radius-card */ --radius-sm: 4px; /* RETIRED (was 6px) -> button radius */ /* ── Shadow (warm, burgundy-tinted) ──────────────────────────────── */ /* 0.1.665: MONOCHROMATIC. Were rgba(70,32,42) and rgba(40,22,26), both burgundy-tinted, which read as a faint pink halo under every card once the lines went neutral. Same opacities, neutral black, so the weight is unchanged and only the hue moves. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 14px 34px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.12); --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); /* ── Spacing scale (every value a multiple of 4px) ───────────────── */ /* VALUE-NAMED on purpose. The old index-named scale (--space-1..13) existed TWICE with DIFFERENT values -- tokens.css said --space-6:24px while foundation.css said 32px, and foundation loaded second, so home.css asked for 24 and silently got 32. A value-named token cannot drift: --space-24 is 24px or it is a typo. Do not reintroduce index names. */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px; --space-160: 160px; /* ── Control sizing ──────────────────────────────────────────────── */ /* One height for a field and for a button beside it. NEW SURFACES ONLY for now: the app's inputs land near 31px and .btn near 30px, so applying this app-wide resizes signed-off screens. Migrate deliberately. */ /* Taxonomy: [component]-[property]-[modifier]-[variant] component = button | field property = height | padding-x | font-size variant = sm | md | lg Values are the MEASURED shipped heights. Re-measure with node tools/scripts/measure-controls.js after any change. (First written in 0.1.618 but lost to a hard reset before it was committed; the /claim page then resolved these to nothing and its buttons collapsed to 21px. Verify a token is SERVED, not just written.) */ --button-height-sm: 28px; --button-height-md: 40px; --button-height-lg: 48px; --button-padding-x-sm: 8px; --button-padding-x-md: 12px; --button-padding-x-lg: 24px; --button-font-size-sm: 11px; --button-font-size-md: 14px; --button-font-size-lg: 16px; --button-radius-sm: 4px; --button-radius-md: 4px; --button-radius-lg: 4px; --button-width-full: 100%; --field-height-sm: 28px; --field-height-md: 40px; --field-height-lg: 48px; --field-padding-x-sm: 8px; --field-padding-x-md: 12px; --field-padding-x-lg: 16px; --field-font-size-sm: 12px; --field-font-size-md: 13px; --field-font-size-lg: 16px; --field-radius-sm: 4px; --field-radius-md: 4px; --field-radius-lg: 4px; /* Deprecated aliases. New code uses the taxonomy above. */ --control-h: var(--button-height-md); /* = 40px */ --cta-h: var(--button-height-lg); /* = 48px */ /* ── Type ────────────────────────────────────────────────────────── */ --font-display: 'Prata', Georgia, serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* body / UI sizes (IBM Plex Sans) */ --text-xs: 12px; --text-sm: 13px; --text-body: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; /* display sizes (Prata) */ --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 56px; }