/* ============================================================================ OTPP Watch — design-tokens.css · Direction: "The Ledger" (sub-brand) From the Claude Design handoff (claude.ai/design). An analyst data-desk: warm newsprint, a vermilion signal + ink-green, dense mono tables, the coverage-gauge motif. Light (default) + dark "terminal" mode via . Component CSS (app.css) reads ONLY these properties. To switch the whole look to another direction later, swap this one file. ============================================================================ */ :root { /* scale / spacing / motion (direction-independent) */ --fs-mega: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); --fs-h1: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); --fs-h2: 1.3rem; --fs-h3: 1.05rem; --fs-body: 0.95rem; --fs-small: 0.82rem; --fs-tiny: 0.72rem; --lh-tight: 1.12; --lh-body: 1.55; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 42px; --s-8: 60px; --maxw: 1220px; --rail: 248px; --r-xs: 3px; --r-s: 5px; --r-m: 8px; --r-l: 12px; --ease: cubic-bezier(.2, .7, .2, 1); --dur-1: .12s; --dur-2: .22s; --dur-3: .5s; /* ── THE LEDGER · LIGHT ── */ --font-display: 'Spectral', Georgia, serif; --font-body: 'Spectral', Georgia, serif; --font-ui: 'Public Sans', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; --font-figure: 'Spline Sans Mono', ui-monospace, monospace; --paper: #F6F2E9; --paper-2: #FBF8F0; --paper-3: #EEE8D8; --rule: #E0D8C4; --rule-2: #CFC4A9; --overlay: rgba(26,24,18,.42); --ink: #1B1915; --ink-2: #534C3B; --ink-3: #6B6349; --ink-on-signal: #FFFFFF; --signal: #B23218; --signal-2: #8E2410; --signal-tint: #F4E0D6; --green: #1E5E40; --green-tint: #DCEAE0; --ok: #1E5E40; --ok-tint: #DCEAE0; --warn: #92590F; --warn-tint: #F2E4CC; --gap: #A6311C; --gap-tint: #F3DED6; --t-climate: #1C6B43; --t-climate-tint: #DEEAE0; --t-weapons: #A6311C; --t-weapons-tint: #F3DED6; --t-catholic: #663B96; --t-catholic-tint: #E8DEF3; --t-labour: #92590F; --t-labour-tint: #F2E4CC; --t-rights: #136663; --t-rights-tint: #D6E9E8; --t-other: #5C5645; --t-other-tint: #E7E1D2; --ai: #3A4DA8; --ai-tint: #E2E5F4; --ai-ink: #2C3A82; --nameplate-color: var(--ink); --accent-line: var(--signal); --gauge-track: #E5DDCB; --gauge-hatch: #D6CDB5; --sh-1: 0 1px 0 var(--rule); --sh-2: 0 1px 2px rgba(40,32,12,.05), 0 2px 8px rgba(40,32,12,.05); --sh-pop: 0 8px 28px rgba(40,32,12,.13), 0 2px 6px rgba(40,32,12,.08); --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--signal); } /* ── THE LEDGER · DARK (analyst terminal) ── */ [data-mode="dark"] { --paper: #14120C; --paper-2: #1C1A12; --paper-3: #242115; --rule: #322D1E; --rule-2: #463F2A; --overlay: rgba(0,0,0,.6); --ink: #ECE6D3; --ink-2: #B8B097; --ink-3: #948C72; --ink-on-signal: #1B1505; --signal: #E2683C; --signal-2: #F4855B; --signal-tint: #3A1F12; --green: #5BB587; --green-tint: #16271D; --ok: #5BB587; --ok-tint: #16271D; --warn: #D9A23E; --warn-tint: #2C2310; --gap: #E8745A; --gap-tint: #2E1812; --t-climate: #5BB587; --t-climate-tint: #16271D; --t-weapons: #E8745A; --t-weapons-tint: #2E1812; --t-catholic: #BC95E4; --t-catholic-tint: #221A30; --t-labour: #DDA250; --t-labour-tint: #2A2110; --t-rights: #4FBDB6; --t-rights-tint: #102624; --t-other: #A39A82; --t-other-tint: #211E14; --ai: #97A3E8; --ai-tint: #1A1D33; --ai-ink: #B2BBEF; --gauge-track: #2A2618; --gauge-hatch: #3A341F; --sh-1: 0 1px 0 var(--rule); --sh-2: 0 2px 10px rgba(0,0,0,.45); --sh-pop: 0 12px 36px rgba(0,0,0,.6); --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--signal); }