/* GRADE BRAND TOKENS — the single source of truth (Sequence A).
*
* ONE file, imported by the marketing site (website/*.html) and the app (frontend/*.html) via
*
* placed BEFORE any page CSS. Synced into website/ and frontend/ by scripts/build_logo_assets.sh
* (the same proven mechanism as the logo assets). Emails + PDFs read the machine-readable twin
* assets/brand/tokens.json (they cannot CSS).
*
* RULE: no raw hex / font-family / raw px spacing anywhere else in the codebase — consume these.
*
* DEMO-PATH INVARIANCE (load-bearing): the screening lane + status tokens below keep their EXACT
* current values, so the lanes/provenance/counts/draft render pixel-unchanged. The new brand
* palette (phthalo, iron-oxide) is for brand/chrome only — never remaps a lane color.
*/
:root {
/* ---- Raw brand palette (P1 · Royal · gold) — named; do not use raw hex elsewhere
* BRAND LOCK 2026-08-01: unified on P1 (royal #2A46E8 / gold #E8B23A), superseding the two prior
* families (Family A navy #0d1b2a and Family B royal #1b3fa0). One palette, one source now.
* Brand/chrome ONLY. The STATUS/LANE tokens below are UNCHANGED (demo-path locked). ------- */
--c-ultramarine: #2A46E8; /* primary brand — P1 royal blue (links, CTA, the mark check) */
--c-deep: #192A8B; /* brand secondary / deep royal (header bars, panels; white text 12:1) */
--c-chrome: #E8B23A; /* accent — P1 gold (the single accent + the mark circle) */
--c-phthalo: #192A8B; /* folded to deep royal (P1 has one accent: gold) */
--c-iron-oxide: #a9821f; /* risk/verify chrome accent -> AA-on-paper gold (NOT the fail-lane red) */
--c-graphite: #14171C; /* ink */
--c-titanium: #f6f4ee; /* paper (Direction B warm paper) */
--c-white: #FFFFFF;
/* ---- 5-step grade scale (pale -> deep royal, P1) ----------------------------------- */
--grade-1: #D4DAFA;
--grade-2: #9FACF5;
--grade-3: #596FED;
--grade-4: #2238BA;
--grade-5: #192A8B;
/* ---- Semantic color tokens (use THESE in components) -------------------------------- */
--brand: var(--c-ultramarine);
--brand-deep: var(--c-deep);
--accent: var(--c-chrome);
--brand-alt: var(--c-phthalo);
--risk: var(--c-iron-oxide);
--ink: var(--c-graphite);
--ink-70: #454B54; /* app body-secondary */
--ink-60: #5A626C; /* site body text (--slate); email/PDF slate */
--ink-45: #6B727C; /* app muted */
--ink-35: #98A0AA; /* site muted (--mute); email/PDF mute */
--paper: var(--c-titanium);
--panel: var(--c-white);
--zebra: #F4F3EF;
--line: #E4E3DE;
--line-2: #EDECE7;
/* ---- STATUS / LANE tokens — DEMO-PATH LOCKED (exact current app values) --------------
* Changing any of these alters the screening lanes/provenance render. Do not touch. */
--success: #1F7A4D; --success-bg: #E9F4EE; /* survivor / pass lane */
--danger: #B23A2E; --danger-bg: #F8ECEA; /* eliminated / fail lane */
--warn: #8A6D1B; --warn-bg: #F7F1E1; /* unknown lane */
/* app aliases kept identical so the existing --pass/--fail/--unk usages are byte-for-byte */
--pass: var(--success); --pass-bg: var(--success-bg);
--fail: var(--danger); --fail-bg: var(--danger-bg);
--unk: var(--warn); --unk-bg: var(--warn-bg);
/* app brand aliases — the app/site pages consume THESE names; defined here so pages can drop
their per-page :root brand blocks and inherit one source (the token-wiring fix). */
--ultra: var(--brand); --ultra-bg: #eef0fd; /* link/accent royal + its light tint */
--chrome: var(--accent); /* gold accent */
--primary: var(--brand-deep); /* dominant CTA fill (deep royal) */
--primary-hover: #14206b; /* CTA pressed (deeper royal) */
/* ---- Type: Poppins (display) / Carlito (body) / mono (data) -------------------------- */
--font-display: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
--font-body: 'Carlito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* scale (rem; line-heights paired) */
--fs-h1: 2.5rem; --lh-h1: 1.12;
--fs-h2: 1.875rem; --lh-h2: 1.2;
--fs-h3: 1.375rem; --lh-h3: 1.3;
--fs-body: 1rem; --lh-body: 1.55;
--fs-small: 0.8125rem; --lh-small: 1.45;
--fs-data: 0.875rem; /* mono/data */
/* ---- Spacing scale (4/8/12/16/24/32/48/64) ------------------------------------------ */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
/* app aliases (--s1..--s6 = 8/16/24/32/48/64) kept identical so existing layout is unchanged */
--s1: var(--space-2); --s2: var(--space-4); --s3: var(--space-5);
--s4: var(--space-6); --s5: var(--space-7); --s6: var(--space-8);
/* ---- Radius / shadow / layout ------------------------------------------------------- */
--radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(20,23,28,.06), 0 1px 3px rgba(20,23,28,.08);
--shadow-2: 0 4px 12px rgba(20,23,28,.10);
--container: 1160px; /* wider than the old ~960 — closes the side-whitespace gap (B3) */
--container-narrow: 760px;
/* ---- Breakpoints (for reference in media queries; CSS vars can't be used in @media) --
* mobile <640, tablet <900, desktop >=900. Documented here as the single source. */
}
/* Dark theme (app only) — overrides keep the SAME semantic names + demo-path lane values legible. */
:root[data-theme="dark"] {
--ink: #ECEDEA; --ink-70: #B7BCC3; --ink-45: #878D96;
--paper: #14171C; --panel: #1A1E25; --zebra: #20252E;
--line: #2B313B; --line-2: #232830;
--brand: #7F90F1; --ultra: #7F90F1; --ultra-bg: #23262d; /* P1 royal, lightened for dark ground (6.1:1) */
--chrome: var(--accent); --primary: var(--brand-deep); --primary-hover: #2238ba; /* app brand aliases (dark) */
--success: #5FC08A; --success-bg: #152720;
--danger: #E0796E; --danger-bg: #2A1917;
--warn: #D8BC6B; --warn-bg: #262015;
--pass: var(--success); --pass-bg: var(--success-bg);
--fail: var(--danger); --fail-bg: var(--danger-bg);
--unk: var(--warn); --unk-bg: var(--warn-bg);
}