/* ========================================================================== Romero & Braas — design tokens -------------------------------------------------------------------------- One source of truth for both public surfaces. Seeded from the Kino language that shipped on /latin-america (D-2026-09-15-10: Kino on all public surfaces, Paper on the intranet and the finance report). Names are semantic, not descriptive: --accent, not --gold. The Paper theme swaps the values, never the names, so a consumer never asks which theme it is in. One attribute switches the whole surface: Fonts: the live 2b pairing is the company standard (D-2026-09-15-11, superseding Archivo + IBM Plex). Newsreader carries display, IBM Plex Sans carries body and UI, IBM Plex Mono carries figures and labels. This file is the P1.1 deliverable. It lives here rather than in a separate rb-design repo for one reason: there is no build step, so a second repo would mean a copied file on day one — exactly the drift the worker protocol warns about. tests/tokens.test.mjs pins every consumer to these values. Moving it to rb-design later is a history extract; the drift test already exists and the published path stays design/tokens.css. CHANGELOG.md in this folder records every change. Consumers bump deliberately; nothing tracks HEAD. ========================================================================== */ /* ---- KINO (default): cinematic dark, warm black, single gold ramp -------- */ :root { /* Ground and surfaces */ --bg: #0A0A08; /* warm near-black, not blue-black */ --surface: #15140F; /* cards, panels, the consent banner */ --surface-2: #1C1A15; /* a step up from surface, for nested blocks */ /* Ink */ --ink: #F8F6F1; --ink-soft: #B8B2A8; --ink-faint: #847E75; /* 4.93:1 on --bg, 4.59:1 on --surface — AA for small text. #78716A, the value this was seeded from, measured 4.12 and 3.84 and failed on both. */ /* Lines */ --hairline: rgba(248, 246, 241, 0.12); --hairline-strong: rgba(248, 246, 241, 0.24); --frame: 1px dashed rgba(248, 246, 241, 0.18); /* Accent — one gold ramp, no second accent hue. --accent reads on the dark ground, --accent-deep on light, --accent-soft is the highlight inside the brand gradient. */ --accent: #D4AF7A; --accent-deep: #B8935A; --accent-soft: #FCF2D9; --accent-ink: #17130B; /* text ON an accent fill */ --danger: #E0997A; /* the one non-gold hue: form errors only. 5.9:1 on --bg. Never decorative. */ --grad-brand: linear-gradient(135deg, #CB9B52 0%, #FCF2D9 50%, #D2A86A 100%); /* Scrims, over the ground above. Kept in step with --bg on purpose: a scrim mixed from a blue-black turns the warm ground grey at low opacity. */ --scrim-30: rgba(10, 10, 8, 0.30); --scrim-55: rgba(10, 10, 8, 0.55); --scrim-80: rgba(10, 10, 8, 0.80); --scrim-95: rgba(10, 10, 8, 0.95); /* Type */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --text-hero: clamp(2.75rem, 6vw, 4.75rem); --text-h1: clamp(2.25rem, 4.4vw, 3.5rem); --text-h2: clamp(2rem, 3.2vw, 2.75rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-display: clamp(1.5rem, 2.6vw, 2.375rem); /* manifest and pull quotes */ --text-body: 0.9375rem; --text-lead: 1.0625rem; --text-small: 0.8125rem; --text-caption: 0.6875rem; /* uppercase labels */ --leading-tight: 1.1; --leading-body: 1.6; --tracking-tight: -0.012em; --tracking-label: 0.14em; /* Space */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: clamp(3.25rem, 5.5vw, 5rem); /* Shape */ --radius: 16px; --radius-field: 12px; --radius-pill: 999px; /* Depth and motion */ --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.75); --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.45); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.3s; --duration-medium: 0.5s; } /* ---- PAPER: cream ground, same gold ramp, for the intranet and the report. Only values change. Every name above still resolves, so a component written against the tokens works in both without a single conditional. ----------- */ :root[data-theme="paper"] { --bg: #F8F6F1; --surface: #FFFFFF; --surface-2: #EFEBE3; --ink: #15140F; --ink-soft: #4C4941; --ink-faint: #7C776D; --hairline: rgba(21, 20, 15, 0.12); --hairline-strong: rgba(21, 20, 15, 0.22); --frame: 1px dashed rgba(21, 20, 15, 0.20); /* The ramp does not change; which end carries text does. On cream, the lighter gold fails contrast, so --accent takes the deep value. */ --accent: #8A6321; --accent-deep: #6B4C17; --accent-soft: #C99B45; --accent-ink: #FFFFFF; --danger: #A33F17; /* 5.4:1 on the cream ground */ --grad-brand: linear-gradient(135deg, #8A6321 0%, #C99B45 50%, #A6792F 100%); --scrim-30: rgba(21, 20, 15, 0.30); --scrim-55: rgba(21, 20, 15, 0.55); --scrim-80: rgba(21, 20, 15, 0.80); --scrim-95: rgba(21, 20, 15, 0.95); --shadow-lift: 0 24px 50px -26px rgba(21, 20, 15, 0.22); --shadow-panel: 0 14px 36px rgba(21, 20, 15, 0.12); }