/* ============================================================================ Flawless — 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. */ --jade: #1F9A82; /* 0.1.990: sampled from the Download button in Figma 1044:2774. CONTRAST, STATED: white text on it is 3.5:1, under the 4.5:1 guideline for 13px text (better than --mustard's 2.49:1, not past the line). Decorative fills only until a darker cut exists, the same rule --mustard has. */ --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 */ /* 0.1.1035, owner-set from Figma 1044:2922: the score card's fill on a CANVAS work area. 0.1.1036 put the work area back to white and the score card back to --surface, so nothing reads this today - it is kept because the owner asked for the colour to be in the system, and it is one word from being used again if the canvas returns. */ --surface-panel: #EAE8E3; --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. 0.1.1031 pointed the FIELD line here too (Figma 1155:2835 calls it Line/border-marketing); 0.1.1036 put fields back on the app's own line, so this is the marketing site's again. 0.1.1032 deleted a second declaration of it: same value, and a token declared twice is how the two copies drift. */ --border: rgba(0,0,0,.1); --border-marketing: rgba(0,0,0,.2); --border-strong: rgba(0,0,0,.35); /* 0.1.960: the score card's sub-score pill fill (Figma #DAD8D4). A solid hex on purpose: the card is white now, and --border's .1 black would read lighter. */ --pill-fill: #DAD8D4; /* 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: #636363; /* 0.1.779: neutral grey. Was #6E6064, a warm burgundy-tinted grey. Owner call: body text, subheads and helper text read as grey, not warm. Chosen to MATCH the old contrast rather than by eye: 6.01:1 on white vs the old 5.97:1, and 5.28:1 on --bg-canvas vs 5.24:1. Nothing gets harder to read. */ /* 0.1.967, owner-set text hierarchy for the app: headings --ink, body copy --ink2, subheads and eyebrows --text-secondary. #6B7280 is 4.83:1 on white (AA). It is NOT used on the beige marketing canvas, where it falls under 4.5. */ --text-secondary: #6B7280; --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 */ /* 0.1.676: score band pills. Tinted background + darker text of the same hue. Each pair clears AA (weak 5.72, fair 5.57, strong 5.17), because the label is the only thing carrying the verdict at 11px. */ /* 0.1.738: five bands. Red is reserved for the worst outcome and mustard moves to Weak, so severity rises with the colour instead of Weak owning the loudest red and Poor having nowhere left to go. Blue Fair is the one new pair: 70-79 is not a warning state (91% reach 80+), so a warm colour overstated it. Every pair passes AA on its own tint. */ /* 0.1.738: three modal sizes. There were five (420, 420, 460, 640, 900) with four different paddings and no tokens, so every new dialog guessed. */ --modal-w-sm: 420px; --modal-pad-sm: 24px; --modal-w-md: 640px; --modal-pad-md: 28px; --modal-w-lg: 900px; --modal-pad-lg: 32px; --band-poor-bg: #FDECEA; --band-poor-fg: #B3261E; /* 5.72:1 */ --band-weak-bg: #F9F1DB; --band-weak-fg: #7C5A23; /* 5.57:1 */ --band-fair-bg: #E8EFF7; --band-fair-fg: #1F4E7A; /* 7.46:1 */ --band-strong-bg: #E6F2EC; --band-strong-fg: #2A7052; /* 5.17:1 */ --band-excellent-bg: #D9EDE2; --band-excellent-fg: #1E5B40; /* 6.54:1 */ /* 0.1.911: the bright end of each band's gradient (score gauge concept D2). DECORATIVE ONLY - the score ring on a resume project tile. Not for text: these do not reach 4.5:1 on white, so text stays on the -fg tokens above. */ --band-poor-vivid: #F04E41; --band-weak-vivid: #E59A24; --band-fair-vivid: #3584D6; --band-strong-vivid: #34B27A; --band-excellent-vivid: #0FA46C; --ring-track: #ECE9E4; /* 0.1.914: the unfilled part of the score ring */ --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; /* 0.1.1029, Figma 1044:2774: how far down the tab bar the step dots sit. The dots and the dotted line between them both read it, so they cannot drift. 0.1.1033: the line's own pattern and the space between steps. --stepper-dash is the PERIOD (1px of ink, the rest empty), and --stepper-gap is what sets the dot-to-dot distance, since a step is only as wide as its label. */ --stepper-dot-y: 16px; --stepper-dash: 5px; --stepper-gap: 96px; /* 0.1.1037, owner-set: every step is this wide, and so is the rule under the selected one - the rule spans its step edge to edge, so one number moves both and they can never disagree. */ --stepper-step-w: 124px; --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: 20px; --button-padding-x-lg: 20px; --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%; /* 0.1.988: the floor a flow CTA never goes under, so a one-word label does not ship a button half the width of the one beside it. It was two hand-set 132px rules in styles.css. Optimize keeps its own wider 200px: it is the page's one main action, not a floor. */ --button-min-w: 132px; --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; /* 0.1.1025, owner-set: every field and every secondary button draws the SAME line, and the light .1 --border is no longer used for either anywhere - a test fails if one goes back to it. 0.1.1031 moved both to --border-marketing (.2) and filled fields with a grey; 0.1.1034 made that grey --hover. 0.1.1036, owner-set: BACK to what production draws - the app's own .1 line and a WHITE fill. The tokens stay, because they are the one place to change a field's line or fill; only what they point at moved. The auth pages keep their own heavier --border-strong line, which is what production draws there. */ --field-border: var(--border); /* 0.1.1062, owner-set: three tiers that read at a glance - primary is the filled burgundy, SECONDARY carries a burgundy outline, TERTIARY a grey one. Two tokens rather than one because the pair must be able to move apart; the auth pages' Google button reads the tertiary line, since a burgundy outline around "Continue with Google" reads as our button, not theirs. */ --btn-secondary-border: var(--burgundy); --btn-tertiary-border: var(--border-marketing); --field-bg: var(--white); /* 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) */ /* 0.1.977: --text-2xs, the uppercase tracked eyebrow ("STEP 1/3"). Its own type token rather than borrowing --button-font-size-sm, which is a button size. */ --text-2xs: 11px; --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; /* 0.1.955: Header 1. The Figma "Header 1" typestyle - ITC Avant Garde Gothic Pro Medium, 32/38, no letter-spacing. It is the page headline on every step of the flow (Resumes, Job, Questions, Optimize), so it belongs here and not in one screen's stylesheet. Prata stays the CARD/display face; this is the page headline, which is a different job. 0.1.993: the line is 40px, owner-set. Figma draws 38. The extra 2px is leading, so it splits above and below the ink: the measured eyebrow-to- headline and headline-to-lede gaps each grew 1px (see .flow-lede). */ --font-heading: 'ITC Avant Garde Gothic Pro', 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --text-h1: 32px; --lh-h1: 40px; --weight-h1: 500; } /* The heading face. MOVED HERE from home.css in 0.1.955 so every surface that loads the tokens can use --font-heading - /login and /signup link tokens.css but NOT home.css, and would otherwise fall back to IBM Plex Sans. The url is relative to THIS file, which sits at the web root beside /fonts, so it resolves the same from /app/ as from the marketing pages. TWO CUTS, and the split matters (0.1.955): Figma's Header 1 is MEDIUM, and 0.1.955 shipped only the Demi file under a 500-600 range, so every page headline rendered one weight too heavy. Medium is its own file now. The homepage hero still asks for 600 and still gets Demi. font-display:swap, never `optional`: this is the first line a page shows. */ @font-face{ font-family:'ITC Avant Garde Gothic Pro'; src:url('fonts/ITCAvantGardePro-Md.woff2?v=0.1.978') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'ITC Avant Garde Gothic Pro'; src:url('fonts/ITCAvantGardePro-Demi.woff2?v=0.1.978') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } /* The typestyle as a class, so markup asks for it by name rather than re-declaring four properties each time. */ .type-h1{ font-family:var(--font-heading); font-size:var(--text-h1); line-height:var(--lh-h1); font-weight:var(--weight-h1); letter-spacing:0; color:var(--ink); margin:0; }