/* ========================================================================== tokens-ledger.css - the "Ledger & Bond" tokens (2026-10-06). Loaded right after base.css and before viz.css / motion.css. It ADDS tokens and a font; it never redefines one base.css owns (--sp-*, --r-*, --lift-1..3 and --ease-out already exist there or in motion.css, and a second definition would silently change spacing and shadows across the whole app). New names only. Newsreader (OFL, variable weight + optical size, latin subset, 60 KB) is the DISPLAY face and is used for exactly four things: the page

, the hero figure on a dark ink band, a tile figure of 25px or more, and an empty-state headline. Inter stays the UI face. font-src 'self' already permits the file. Gold = the one thing. Graphite (--ink-700) is the default data colour; the latest / selected mark is gold. Company hues are for a company, never decoration. ---- THE COMPANY CHART HUES, VALIDATED (dataviz skill, scripts/validate_palette.js) ---- Fixed series order everywhere they are stacked or listed: Thumbies, Express (EFF), Messenger, CemSites [T, E, M, C] Both blue families and both green families are never adjacent. light #2799D6,#1E7A3E,#2F5FC4,#12A189 on #FFFFFF [PASS] Lightness band all 4 inside L 0.43-0.77 [PASS] Chroma floor all 4 >= 0.1 [PASS] CVD separation worst adjacent #1E7A3E<->#2799D6 dE 21.5 (deutan) - tritan 4.7 [PASS] Normal-vision floor worst adjacent #1E7A3E<->#2799D6 dE 22.6 (normal) [PASS] Contrast vs surface all 4 >= 3:1 -> ALL CHECKS PASS dark #2A9AD8,#3FA365,#6A7EE6,#17A58F on #171613 [PASS] Lightness band all 4 inside L 0.48-0.67 [PASS] Chroma floor all 4 >= 0.1 [PASS] CVD separation worst adjacent #17A58F<->#6A7EE6 dE 16.3 (deutan) - tritan 4.2 [PASS] Normal-vision floor worst adjacent #3FA365<->#2A9AD8 dE 18.1 (normal) [PASS] Contrast vs surface all 4 >= 3:1 -> ALL CHECKS PASS --s1..--s6 (existing, unchanged): light and dark both PASS (worst adjacent #B02A46<->#00897B dE 8.1 light; #C23751<->#009F8E dE 9.5 dark). --vz-up / --vz-down (the polarity pair for bridges and diverging heat) are --s2 teal and --s3 wine: warm against cool, validated as the pair #00897B,#B02A46 light and #009F8E,#C23751 dark - ALL CHECKS PASS. Never use all four company hues in a scatter or any all-pairs form (Thumbies vs CemSites are 12.8 apart); use small multiples, or the name + avatar the app already enforces. The CemSites green-to-blue gradient stays on its avatar and lockup; in a chart it is the flat #12A189 / #17A58F. Graphite + gold (#2B2A27 / #B28C54) is not a categorical palette (neutrals fail the chroma floor by design); #2B2A27 on #FFFFFF is 14.6:1. ========================================================================== */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/newsreader-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* TYPE */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* semantic type roles (px at a 16px root; they scale with the 20px root at 1920x1200+) */ --t-display: 500 2.75rem/1 var(--font-display); /* 44 hero figure on the ink band */ --t-figure: 500 1.75rem/1.05 var(--font-display); /* 28 KPI tile figure */ --t-h1: 500 1.5rem/1.15 var(--font-display); /* 24 page title */ --t-h2: 600 .9375rem/1.3 var(--font-ui); /* 15 card / section title */ --t-body: 400 .84rem/1.5 var(--font-ui); /* 13.4 = --fs-md, THE body */ --t-meta: 400 .76rem/1.4 var(--font-ui); /* 12.2 = --fs-xs */ --t-micro: 600 .69rem/1.2 var(--font-ui); /* 11 = the floor */ /* SHAPE (new names only: --r-sm, --r, --r-lg, --r-pill live in base.css) */ --r-card: 14px; --r-ctl: 10px; /* INK: the graphite default data colour */ --ink-900: #141310; --ink-700: #2B2A27; --ink-500: #5C5A53; --ink-300: #A8A498; /* ELEVATION, tinted with the shell hue (never a grey-black). --lift-1..3 stay in motion.css. */ --lift-0: 0 0 0 1px var(--border); --vz-tip-lift: 0 2px 0 rgba(20, 19, 16, .04), 0 18px 40px -18px rgba(20, 19, 16, .42); /* MOTION */ --dur-1: 140ms; --dur-2: 220ms; --dur-3: 620ms; --dur-4: 900ms; --ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* THE GRAIN on an ink band: 3.5% film noise, inline so the CSP (img-src data:) allows it */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* COMPANY CHART HUES, light (validated above) */ --vz-co-thumbies: #2799D6; --vz-co-eff: #1E7A3E; --vz-co-messenger: #2F5FC4; --vz-co-cemsites: #12A189; /* polarity pair for bridges and diverging heat: warm against cool */ --vz-up: var(--s2); --vz-down: var(--s3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-900: #EFEBE0; --ink-700: #C9C3B5; --ink-500: #8E8778; --ink-300: #4B473E; --vz-tip-lift: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .8); --vz-co-thumbies: #2A9AD8; --vz-co-eff: #3FA365; --vz-co-messenger: #6A7EE6; --vz-co-cemsites: #17A58F; } } :root[data-theme="dark"] { --ink-900: #EFEBE0; --ink-700: #C9C3B5; --ink-500: #8E8778; --ink-300: #4B473E; --vz-tip-lift: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .8); --vz-co-thumbies: #2A9AD8; --vz-co-eff: #3FA365; --vz-co-messenger: #6A7EE6; --vz-co-cemsites: #17A58F; }