/* ============================================================================ SRN DESIGN LANGUAGE — THE TOKEN CONTRACT #287/#297 ---------------------------------------------------------------------------- One namespace. Every theme is a value-set of this contract; nothing else. If a component needs a colour that isn't here, the contract is missing a ROLE — add the role. Never reach for a literal. THE NAMING RULE A token names a ROLE, never an appearance. --srn-danger ✅ the app can reason about it --btn-glow-yellow ❌ nothing can reason about "yellow" ── THIS FILE HOLDS SCI-FI'S CURRENT VALUES, EXACTLY ────────────────────── Sci-fi is presently the BASE — what the app looks like with no theme applied (theme-switcher.js gives it `overlay: null`). So expressing sci-fi in tokens FIRST is a deliberate visual NO-OP: every value below is the literal already in minority-report.css, moved, not changed. That is the whole point. It is the one migration step whose correctness can be PROVEN rather than argued — #296's baseline harness asserts the app renders pixel-identical afterwards. Starting from slate or corporate would change two things at once with nothing to check against. ⚠️ DO NOT "TIDY" A VALUE IN THIS FILE as a side effect of other work. Correcting one here turns a provable no-op into an unreviewed visual change. Converge deliberately, in its own commit, with the harness showing exactly what moved — as #304 did for the cyan family below, and as that note records, MEASURE FIRST: four of those seven "obviously duplicated" cyans turned out to be distinct colours, and flattening them all would have destroyed a real palette. ========================================================================== */ :root { /* ── ACCENT ───────────────────────────────────────────────────────── Triplets, not hex, because the base composes this colour at ~15 different alphas (rgba(var(--srn-accent-rgb), 0.32) and friends). A hex token could not express those without changing the value. */ --srn-accent-rgb: 0, 234, 255; /* #00eaff — the dominant accent */ --srn-accent: rgb(var(--srn-accent-rgb)); /* ── The sci-fi cyan family, after measurement (#304) ────────────────── #297 parked SEVEN cyans as --srn-accent-drift-N on the assumption they were accidental copies of one colour. Measured in Lab (ΔE76), that assumption was WRONG — they are four distinct colours plus genuine drift inside two clusters: accent / d3 / d4 d3↔d4 ΔE 0.7, vs accent 5.6-6.2 → converged d2 / d5 ΔE 1.5 → converged d1 #00ffff ΔE 14 vs accent, 40 vs d2 → DISTINCT, kept d6 #4df ΔE 11.5 vs accent → DISTINCT, kept Flattening all seven would have destroyed a real two-tone cyan palette, not tidied up a mistake. Only the two clusters were collapsed; the survivors are now named for the ROLE they play in the HUD instead of being labelled as errors. */ --srn-accent-glow-rgb: 0, 255, 255; /* #00ffff — luminous edges: borders, glows, text-shadow */ --srn-accent-indicator-rgb: 0, 198, 255; /* #00c6ff — bar fills, stream indicators */ --srn-accent-indicator-end: #0072ff; /* the far end of the indicator gradient */ --srn-accent-text: #4df; /* .neon-text-cyan body colour */ /* ── INK ──────────────────────────────────────────────────────────── The base tints text by alpha-ing white over a dark ground rather than defining discrete greys, so the triplet is the honest primitive. */ --srn-text-rgb: 255, 255, 255; --srn-text: rgb(var(--srn-text-rgb)); --srn-text-soft: rgba(200, 240, 255, 0.8); /* cyan-tinted body ink */ --srn-text-muted: #b0bec5; --srn-text-mono: #a0d9d9; /* ── SCRIM — black at many alphas: overlays, shadows, vignettes ───── */ --srn-scrim-rgb: 0, 0, 0; /* #310 — ink that sits ON a filled accent button. Sci-fi's accents are BRIGHT (cyan/amber/green), so dark ink. Light themes fill with a dark accent -> white. */ --srn-text-on-accent: #04222b; /* ── STATUS — roles, not colours ───────────────────────────────────── */ --srn-ok: #00ff87; --srn-ok-deep: #00b341; --srn-ok-alt-rgb: 0, 255, 153; --srn-warn-rgb: 255, 170, 0; /* #ffaa00 */ --srn-warn: rgb(var(--srn-warn-rgb)); --srn-warn-alt: #ffb703; --srn-danger: #ff3366; --srn-danger-rgb: 255, 51, 102; /* ── ORNAMENT ACCENTS — sci-fi's per-widget accent variants. Named by ROLE where one exists; the rest keep an explicit ornament name rather than pretending to a semantic they do not have. */ --srn-ornament-gold: #ffd700; --srn-ornament-gold-rgb: 255, 215, 0; --srn-ornament-green: #00ff41; --srn-ornament-green-rgb:0, 255, 65; --srn-ornament-violet: #d800ff; --srn-ornament-violet-rgb:216, 0, 255; --srn-ornament-magenta: #ff00aa; --srn-ornament-magenta-rgb:255, 0, 170; /* ── SURFACE — the dark grounds the HUD sits on ──────────────────── (sci-fi's own values; the per-theme value-sets are at the foot of this file) Each is a distinct depth in the base; they are NOT interchangeable. */ --srn-canvas-deep: rgba(3, 8, 14, 0.98); --srn-canvas: rgba(5, 12, 20, 0.95); --srn-canvas-soft: rgba(9, 13, 20, 0.8); --srn-canvas-lift: rgba(16, 23, 33, 0.4); --srn-tile: rgba(10, 25, 41, 0.6); --srn-tile-2: rgba(20, 30, 40, 0.35); --srn-tile-glass: rgba(10, 20, 30, 0.6); --srn-tile-glass-2: rgba(10, 30, 50, 0.75); /* #323 — the neutral border role existed only in slate/corporate; its absence here made any var(--srn-tile-border) border invalid (→ border-style:none) in sci-fi. Restore it as sci-fi's accent-tinted hairline (the base's edge style). */ --srn-tile-border: rgba(var(--srn-accent-rgb), 0.15); } /* ============================================================================ THEME VALUE-SETS #299 ---------------------------------------------------------------------------- A theme is a VALUE-SET of the contract above — nothing else. No new roles, no per-theme selectors, no subtraction. ⚠️ EVERY token the base consumes must be redefined here, not just the obvious ones. Any token left out falls back to sci-fi's value, so a half-filled value-set leaks blue-teal HUD surfaces into a calm grey theme — the exact subtraction failure #287 exists to end, reintroduced through the front door. Values from Iris's #299 design pass, judged against real captures of all 14 pages in all 3 themes and contrast-checked pairwise. Notable: her slate accent (#519cec) is IDENTICAL to the one in docs/design-language, derived independently from a different starting point — two derivations reaching the same answer, which is why it is treated as the theme's own accent rather than a preference. ========================================================================== */ /* ── SLATE — calm, dark, and finally with an accent that means it ─────────── The measured fault was not "flat" but BIMODAL: the same heading role rendered at C 0.052 where slate remembered to override, and C 0.228 (raw Bootstrap blue) where it forgot. A value-set removes the second case by construction. Accent goes C 0.052 -> 0.140, ~2.7x, at the same hue family. */ html[data-app-theme="slate"] { --srn-text-on-accent: #ffffff; /* #310 — white ink on the slate accent fill */ --srn-accent-rgb: 81, 156, 236; /* #519cec oklch(.680 .140 252) */ --srn-accent: rgb(var(--srn-accent-rgb)); --srn-accent-glow-rgb: 139, 188, 239; /* quiet accent: rings, hairlines */ --srn-accent-indicator-rgb: 41, 117, 201; /* bars, indicators — deeper */ --srn-accent-indicator-end: #1d5da6; --srn-accent-text: #8bbcef; --srn-text-rgb: 220, 226, 232; /* #dce2e8 */ --srn-text: rgb(var(--srn-text-rgb)); --srn-text-soft: #abb2ba; --srn-text-muted: #7f8790; --srn-text-mono: #9fb3c4; /* Same value as sci-fi, stated explicitly rather than inherited: a value-set that relies on fallback is how sci-fi leaks back in. */ --srn-scrim-rgb: 0, 0, 0; --srn-ok: #53be70; --srn-ok-deep: #2f8f4c; --srn-ok-alt-rgb: 83, 190, 112; --srn-warn-rgb: 239, 168, 49; /* #efa831 */ --srn-warn: rgb(var(--srn-warn-rgb)); --srn-warn-alt: #d9922a; --srn-danger: #f37272; --srn-danger-rgb: 243, 114, 114; /* Surfaces: opaque, because slate is not a glass theme. The sci-fi contract expresses these as rgba() over a backdrop; here they are solid so the "glass" roles simply resolve to flat panels rather than leaking a tint. */ --srn-canvas-deep: #0f1216; --srn-canvas: #13161b; --srn-canvas-soft: #171b21; --srn-canvas-lift: #1a1f24; --srn-tile: #262d37; --srn-tile-2: #333a44; --srn-tile-border: #3d434a; --srn-tile-glass: #262d37; --srn-tile-glass-2: #2c3440; /* Ornament is sci-fi's language. Slate opts out (#298), so these resolve to the theme's own accent family rather than the HUD rainbow — anything that still paints ornament stays in-palette instead of going magenta. */ --srn-ornament-gold: var(--srn-warn); --srn-ornament-gold-rgb: var(--srn-warn-rgb); --srn-ornament-green: var(--srn-ok); --srn-ornament-green-rgb: var(--srn-ok-alt-rgb); --srn-ornament-violet: var(--srn-accent); --srn-ornament-violet-rgb: var(--srn-accent-rgb); --srn-ornament-magenta: var(--srn-accent); --srn-ornament-magenta-rgb: var(--srn-accent-rgb); } /* ── CORPORATE — light ground, and the accent stays put ──────────────────── ⚠️ --srn-accent is DELIBERATELY UNCHANGED at #0f4a8e. Iris measured the shipped value and her independent derivation landed on #104a8e — one unit apart. It is correct and it is the established identity; do not "improve" it. Corporate's own good idea is the CONTEXT-AWARE accent: #0f4a8e (L* 41) is heavy on pure white, so accents sitting ON a tile use the lighter #2061b6 (L* 50). */ html[data-app-theme="corporate"] { --srn-text-on-accent: #ffffff; /* #310 — white ink on corporate navy */ --srn-accent-rgb: 15, 74, 142; /* #0f4a8e — chrome accent, unchanged */ --srn-accent: rgb(var(--srn-accent-rgb)); --srn-accent-glow-rgb: 32, 97, 182; /* #2061b6 — the accent ON a tile */ --srn-accent-indicator-rgb: 32, 97, 182; --srn-accent-indicator-end: #0a3260; --srn-accent-text: #2061b6; --srn-text-rgb: 30, 36, 46; /* #1e242e */ --srn-text: rgb(var(--srn-text-rgb)); --srn-text-soft: #4c535d; --srn-text-muted: #757b84; --srn-text-mono: #4c535d; --srn-ok: #007f3d; --srn-ok-deep: #00632f; --srn-ok-alt-rgb: 0, 127, 61; --srn-warn-rgb: 169, 100, 0; /* #a96400 — AA on white */ --srn-warn: rgb(var(--srn-warn-rgb)); --srn-warn-alt: #8a5100; --srn-danger: #c2272d; --srn-danger-rgb: 194, 39, 45; --srn-canvas-deep: #dfe4ec; --srn-canvas: #e8ecf3; /* measured and correct — unchanged */ --srn-canvas-soft: #eef1f6; --srn-canvas-lift: #f4f7fb; --srn-tile: #ffffff; --srn-tile-2: #f4f7fb; --srn-tile-border: #d3d8de; --srn-tile-glass: #ffffff; --srn-tile-glass-2: #f4f7fb; /* Scrim is black-on-dark in sci-fi; on a light ground the same alphas read as dirt. Corporate scrims with its own ink instead. */ --srn-scrim-rgb: 30, 36, 46; --srn-ornament-gold: var(--srn-warn); --srn-ornament-gold-rgb: var(--srn-warn-rgb); --srn-ornament-green: var(--srn-ok); --srn-ornament-green-rgb: var(--srn-ok-alt-rgb); --srn-ornament-violet: var(--srn-accent); --srn-ornament-violet-rgb: var(--srn-accent-rgb); --srn-ornament-magenta: var(--srn-accent); --srn-ornament-magenta-rgb: var(--srn-accent-rgb); }