/* VHS design system tokens. OLD GLORY, adopted 2026-08-14 on Justin's instruction: "change the HCS color palette to Official U.S. flag colors (per federal spec, Old Glory)" -- Old Glory Red #B22234, White #FFFFFF, Old Glory Blue #3C3B6E. WHAT THIS REPLACES. Navy + Gold + Paper, adopted 2026-08-09 from the design system bundle Justin supplied: was now navy-900 #0A1628 blue-700 #3C3B6E Old Glory Blue gold-600 #C9A347 red-600 #B22234 Old Glory Red paper #F7F2E8 white #FFFFFF the flag's white Three consequences, stated here rather than discovered on a screen: 1. GOLD IS GONE, AND RED IS NOW THE ACCENT. The flag has no gold, so the thing you act on is red. That collides with the principle the old file carried -- "flag red is reserved, never decorative" -- because red is now the most decorative colour in the system. The reserved meaning did not disappear; it moved to --alert-red (#7A1020, a deeper shade), and the markers that carry it were already outlined or dashed rather than relying on hue alone. FLAGGED FOR JUSTIN: two reds a screen apart is a weaker signal than red-against-gold was. See the note in the amendment log. 2. THE FIELD IS WHITE, NOT PAPER. The warm cream ground is gone, so the greys that separate one surface from another are now cool (tinted toward the blue) rather than warm. Nothing else about the paper-first direction changed: white page, blue furniture. 3. GREEN AND AMBER SURVIVE, DELIBERATELY. They are not flag colours and they are not brand: they are the client traffic light, the video-JD state, and the "imported, not yet confirmed by a human" marker. A traffic light rendered in three shades of red tells a recruiter nothing. Losing that is losing information somebody acts on, so the functional signals below are kept and named separately from the brand palette. ALSO FLAGGED FOR JUSTIN: if he wants the screens strictly three colours, this is the block to cut, and the cost is those three distinctions. HOW TO USE IT. Components reference the SEMANTIC aliases at the bottom -- --surface-page, --text-primary, --accent -- never the raw scale. The raw scale exists so the aliases have somewhere to point. CONTRAST. Every pairing below that carries text was computed, not eyeballed, because Old Glory Blue is a MID-TONE blue where the old navy was nearly black, and a mid-tone ground is where contrast quietly fails. White on #3C3B6E is 10.3:1; white on #21204A is 15.3:1; #B22234 on white is 6.6:1; #7A1020 on white is 10.9:1; #E8909C on #3C3B6E is 4.6:1. Red on blue is 1.6:1 and is therefore NEVER a text pairing -- that is what --accent-on-dark exists to prevent. */ :root { /* ---- BLUE (primary) --------------------------------------- #3C3B6E is the spec colour. The scale runs darker for the masthead and the rail, and lighter for accents that must sit on a blue ground. */ --blue-900: #21204A; /* deepest field, rail, masthead */ --blue-800: #2C2B57; --blue-700: #3C3B6E; /* OLD GLORY BLUE, per federal spec */ --blue-600: #454478; /* banded meta rows */ --blue-500: #565591; --blue-300: #9C9BC8; /* blue on a dark ground */ --blue-200: #C5C4E0; /* ---- RED (accent) ----------------------------------------- #B22234 is the spec colour and is the accent: the things you act on. --red-900 is the RESERVED shade -- attention, confidential, past its window -- and is deliberately deeper so the two do not read as the same red. */ --red-900: #7A1020; /* reserved: alert / confidential / overdue */ --red-600: #B22234; /* OLD GLORY RED, per federal spec */ --red-500: #C4485A; /* hover, lighter on white */ --red-300: #E8909C; /* red on a blue ground */ --red-100: #F7DDE1; /* wash, badge fill */ /* ---- WHITE / NEUTRAL -------------------------------------- #FFFFFF is the spec colour and is the page. The greys below are the only non-flag values in the brand palette and they exist because a hover state, an inset and a hairline cannot be white on white. They are tinted toward the blue rather than toward the old cream. */ --white: #FFFFFF; /* WHITE, per federal spec */ --gray-50: #F4F5F8; /* reading surface, topbar */ --gray-100: #EAEBF1; /* inset, hover fill */ --gray-200: #D7D9E4; /* hairline rule */ /* ---- INK / TEXT ------------------------------------------- */ --ink: #1A1A22; /* 17.0:1 on white */ --muted: #55555F; /* 7.4:1 on white */ --mid-gray: #71717E; /* 4.8:1 on white */ /* ---- RULES ------------------------------------------------- */ --rule: var(--gray-200); --rule-cool: #E4E6EE; --rule-blue: rgba(255, 255, 255, .10); /* hairline on blue */ /* ---- FUNCTIONAL SIGNALS ---------------------------------- NOT the brand palette, and not flag colours. Each one carries a fact a recruiter reads off the screen, and each needs to be distinguishable from the other two at a glance: --alert-red attention, confidential, past its window --caution imported and NOT yet confirmed by a human --go-green cleared, confirmed, completed --caution and --go-green are the reason this file is not three colours. See consequence 3 in the header. */ --alert-red: var(--red-900); --caution: #9A5B00; /* 5.6:1 on white. Amber, and it has to be amber: "waiting for a human" is neither an alert nor an all-clear. */ --go-green: #1A4A2E; --red-wash: var(--red-100); --green-wash: #d4edda; /* ---- TYPE FAMILIES ----------------------------------- */ /* Four roles, each with one job. Do not improvise families. Every stack ends in a system fallback, so a blocked font request degrades rather than breaks -- this app sits behind IAP and must render on a bad connection in a client car park. */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* ---- TYPE SCALE -------------------------------------- */ --t-display-lg: 32px; --t-display-md: 25px; --t-display-sm: 18px; --t-body-lg: 16px; --t-body-md: 14px; --t-body-sm: 12px; --t-ui-lg: 15px; --t-ui-md: 13px; --t-ui-sm: 11px; --t-label: 9px; --lh-tight: 1.12; --lh-snug: 1.30; --lh-body: 1.46; --lh-relaxed: 1.72; /* The single most recognisable type gesture in the brand: mono labels, uppercase, widely tracked. */ --track-label: 0.18em; --track-eyebrow: 0.22em; --track-tight: 0.08em; /* ============================================================ SEMANTIC ALIASES — reference these in components. ============================================================ */ --surface-page: var(--white); --surface-read: var(--gray-50); --surface-inset: var(--gray-100); --surface-card: var(--white); --surface-dark: var(--blue-900); --surface-dark-2: var(--blue-700); --surface-band: var(--blue-600); --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: var(--mid-gray); --text-on-dark: rgba(255, 255, 255, .92); --text-on-dark-2: rgba(255, 255, 255, .55); --text-link: var(--blue-700); /* 10.3:1 on white */ --accent: var(--red-600); --accent-on-dark: var(--red-300); /* the spec red is 1.6:1 on blue. Never use --accent on a blue ground; use this. */ --accent-on-white: var(--red-600); /* Kept because nine rules across two apps still name it, and the surface it describes is now white rather than paper. */ --accent-on-paper: var(--accent-on-white); --border-hair: var(--rule); --border-strong: var(--blue-900); --label-on-dark: var(--red-300); --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; }