/*
* GeoClear Design Tokens v1.0
* Source: docs/design/design-spec-v1.md + docs/brand/brand-laws-v2.md
* Canonized: 2026-06-27 (EPIC-2026-0161 Q-2452 + Q-2453)
*
* USAGE
* Import once in the top-level layout:
*
* (or copy into the app's vendored static path; see release-evidence-site
* and src/web for the two reference applications)
*
* Two registers, one system. Default is the RECORD register (paper, ink,
* quiet teal accent). Add class="instrument" to a section to switch to the
* INSTRUMENT register (deep navy, monospace, the verified spine).
*
*
*
* The register switch overrides --surface, --text, --text-secondary, and
* --line beneath the same token names. Everything else inherits.
*
* THE LAWS (enforced by tools/terminology-check.sh)
* 1. Aurora (--verified, #22D3A6) is the verified state ONLY.
* Never decoration. Never a brand accent.
* 2. Teal text on paper uses --accent-ink (#067A73). Raw --accent (#00C2B8)
* is for fills + rules + accents on dark.
* 3. Verdict colors appear only in the spine, the Evidence Reader, and
* verdict badges. Never elsewhere.
* 4. No dashes anywhere. Not em, not en, not spaced-hyphen connector.
*/
:root {
/* ─── RECORD REGISTER (default . paper, ink, quiet teal) ───────────────── */
/* Surfaces */
--surface: #FAF8F4; /* Paper. The record surface. */
--surface-raised: #FFFFFF; /* Cards, raised panels */
--surface-quiet: #F1EEE7; /* Quiet bands, table headers */
/* Text */
--text: #16222E; /* Body text */
--text-secondary: #54616E; /* Secondary text */
--text-muted: #8A96A2; /* Muted labels */
/* Lines + ink */
--line: #E4DED3; /* Hairlines on paper */
--ink: #0B1F3B; /* Authority, headings */
--abyss: #07111E; /* Instrument register base */
--navy-2: #0F2742; /* Mid-tone navy */
/* Accent + verified */
--accent: #00C2B8; /* Signal Teal. Brand accent. Fills on dark. */
--accent-ink: #067A73; /* Teal Ink. Use for teal text + links on paper (AA contrast). */
--verified: #22D3A6; /* AURORA. The verified state ONLY. */
/* Verdict palette (functional, NEVER decorative) */
--verdict-accept: #0c9e8e;
--verdict-hold: #b9821a;
--verdict-escalate: #5160c9;
--verdict-reject: #cf5346;
--verdict-block: #a8332c;
/* Verdict tints (16-22% opacity for badge backgrounds) */
--verdict-accept-bg: rgba(34, 211, 166, 0.16); /* uses aurora for accept-tint as designed */
--verdict-hold-bg: rgba(185, 130, 26, 0.22);
--verdict-escalate-bg: rgba(81, 96, 201, 0.18);
--verdict-reject-bg: rgba(207, 83, 70, 0.20);
--verdict-block-bg: rgba(168, 51, 44, 0.24);
/* Neutrals (extended scale for components) */
--n-900: #16222E;
--n-700: #34424F;
--n-600: #54616E;
--n-400: #8A96A2;
--n-300: #B9C2CB;
--n-200: #DDE3E9;
--n-100: #EEF2F5;
/* Typography tokens */
--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
--t-display: clamp(2rem, 4vw, 2.875rem); /* 32-46px hero */
--t-h2: clamp(1.5rem, 2.5vw, 1.875rem); /* 26-30px section heads */
--t-h3: clamp(1.0625rem, 1.5vw, 1.125rem); /* 17-18px sub heads */
--t-lede: 1.0625rem; /* 17px section intro */
--t-body: 1rem; /* 16px paragraph */
--t-small: 0.84375rem; /* 13.5px caption */
--t-data: 0.8125rem; /* 13px record IDs */
--t-seal: 0.6875rem; /* 11px seal eyebrow */
--t-btn: 0.875rem; /* 14px button */
--tracking-display: -0.0625rem; /* -1px */
--tracking-h2: -0.03125rem; /* -0.5px */
--tracking-seal: 0.15625rem; /* 2.5px wide-tracked */
--leading-display: 1.05;
--leading-h2: 1.1;
--leading-body: 1.6;
/* Spacing (4px base) */
--s1: 0.25rem; /* 4 */
--s2: 0.5rem; /* 8 */
--s3: 0.75rem; /* 12 */
--s4: 1rem; /* 16 */
--s6: 1.5rem; /* 24 */
--s8: 2rem; /* 32 */
--s12: 3rem; /* 48 */
--s16: 4rem; /* 64 */
--s24: 6rem; /* 96 . desktop section padding */
/* Radius */
--r-sm: 0.5rem; /* 8 . chips, badges, inputs */
--r-md: 0.75rem; /* 12 . cards, panels */
--r-lg: 1.125rem; /* 18 . hero panels, the sample */
/* Elevation */
--e-0: 0 0 0 0 transparent; /* hairline only */
--e-1: 0 1px 2px rgba(11, 31, 59, 0.04), 0 8px 24px rgba(11, 31, 59, 0.06); /* raised card */
--e-2: 0 12px 40px rgba(11, 31, 59, 0.10); /* the sample, modals */
/* Motion */
--m-fast: 120ms; /* hover, focus */
--m-base: 200ms; /* state change */
--m-spine: 900ms; /* the signature load sequence */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* standard, ease out */
/* Container widths */
--container-marketing: 67.5rem; /* 1080px marketing max */
--container-reading: 47.5rem; /* 760px long-form max */
/* Container side padding */
--pad-side: 1.875rem; /* 30px desktop */
--pad-side-sm: 1.25rem; /* 20px mobile */
}
/* ─── INSTRUMENT REGISTER OVERRIDES ──────────────────────────────────────────
* Add class="instrument" to a section to switch. Same token names, different
* values beneath. Every component built on the tokens reflows automatically.
*/
.instrument {
--surface: #07111E; /* Abyss */
--surface-raised: rgba(255, 255, 255, 0.05);
--surface-quiet: rgba(255, 255, 255, 0.03);
--text: #EAF2F8;
--text-secondary: #9FB3C8;
--text-muted: #6F8295;
--line: rgba(255, 255, 255, 0.12);
/* --accent, --verified, and --verdict-* tokens stay constant across registers */
}
/* ─── REDUCED MOTION ─────────────────────────────────────────────────────────
* Per design spec Part 4 + Part 7: the spine renders fully drawn with the
* verified node already lit. No travel, no pulse. All hover transitions drop
* to instant.
*/
@media (prefers-reduced-motion: reduce) {
:root {
--m-fast: 0ms;
--m-base: 0ms;
--m-spine: 0ms;
}
}
/* ─── PRINT ──────────────────────────────────────────────────────────────────
* Federal reviewers print to PDF. Keep the record register on print, kill
* shadows, force black ink.
*/
@media print {
:root {
--surface: #FFFFFF;
--text: #000000;
--e-1: none;
--e-2: none;
}
.instrument {
--surface: #FFFFFF;
--text: #000000;
--text-secondary: #333333;
--line: #CCCCCC;
}
}