/* ══════════════════════════════════════════════════════════════════════════ static/_tokens.css — Alexander Atlas shared design tokens ══════════════════════════════════════════════════════════════════════════ PURELY ADDITIVE. This file deliberately declares NO light-mode values. Every page still carries its own inline :root block, and those blocks have drifted: 14 of the 66 token names hold different values on different pages (--mute is #b8b2a4 on the map and #6b6558 on landing; reset/signup run a separate warmer palette entirely). Publishing one canonical light value per name would visibly change seven pages, so this file does not try. Instead the dark theme is declared on `html[data-theme="dark"]`, which has specificity (0,1,1) and therefore beats each page's `:root` (0,1,0) regardless of source order. Light mode is untouched — remove the attribute and every page renders exactly as it does today. Contrast figures are measured against the plate ground #12100c and the card ground #191611. Anything carrying body text clears 4.5:1. Activation: · removal reverts completely. ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* ── Surfaces ─────────────────────────────────────────────────────────── */ --paper: #12100c; /* the plate ground */ --paper2: #1a160f; --bg: #12100c; --cream: #12100c; --white: #191611; /* "white" now means the raised card surface */ --card: #191611; --paper-rgb: 18,16,12; /* Floating plates over the map — the cartouche, legend, layer box and zoom control. In light these are rgba(ink,.94): a near-opaque DARK plate on cream. --ink-rgb cannot serve here in dark, because its other job is a .03-.25 wash that must go light. Separate token, stays dark. */ --plate-rgb: 26,22,15; --plate: #1a160f; /* solid form, for background:var(--ink) rules */ --tint: #2a2418; /* warm selected/active fill (was #e9e2cd) */ --surface-alt: #191611; /* a light surface with no existing token counterpart */ --text-dim: #a9a293; /* body grey where the page's own --gray differs, so a fallback against --gray would move light mode */ --text-strong: #ece7dc; /* same, for near-black body text */ --on-gold: #12100c; /* text ON a gold fill. Deliberately NOT --fg-elite: that name already exists in RenoVision_Demo's own :root, so a fallback against it never fires in light. */ /* ── Ink ──────────────────────────────────────────────────────────────── */ --ink: #ece7dc; /* 15.41:1 — mirrors light mode's 17.50:1 */ --dark: #ece7dc; --ink2: #cdc6b8; --ink-rgb: 236,231,220; --mute: #a9a293; /* 7.49:1 */ --muted: #a9a293; --gray: #a9a293; /* 7.49:1 */ --gray-rgb: 169,162,147; --faint: #8b8376; /* 5.03:1 — clears AA, so a form hint is safe */ /* ── Rules ────────────────────────────────────────────────────────────── */ --line: #2e2920; --border: #2e2920; --line-strong: #413a2d; /* ── Gold ─────────────────────────────────────────────────────────────── * * The brand gold #8a6d1d falls to 3.88:1 on this ground and can no longer * carry text. The light theme's ACCENT gold is promoted to primary; the old * brand gold survives only as an ornament weight. */ --gold: #d8b654; /* 9.72:1 (was #8a6d1d) */ --gold-lt: #e3c877; /* 11.58:1 */ --gold2: #e3c877; --gold-mid: #c9a44a; --gold-rgb: 216,182,84; --gold2-rgb: 227,200,119; /* ── Choropleth ramp ──────────────────────────────────────────────────── * * Re-derived, not inverted: #6b2033 measured 1.70:1 and #174f4a 2.04:1 on * this ground — both ends of the ranking vanished. Hues held, lightness * lifted. Validator: CVD ΔE 14.9 deutan, normal-vision 16.5, all 5 ≥ 3:1. */ --ramp0: #c04d63; --ramp1: #e08540; --ramp2: #ebcd76; --ramp3: #3d9a7a; --ramp4: #7fdcb6; --nodata: #4a453b; /* ── Score bands ──────────────────────────────────────────────────────── */ --band-caution: #e2707a; --band-spec: #e08540; --band-mod: #ebcd76; --band-modstrong: #4fae8c; --band-strong: #7fdcb6; --band-elite: #d8b654; /* Badge text ON a band. Every dark band is a light tone, so the text that sits on it is the plate ground rather than cream. */ --fg-caution: #12100c; --fg-spec: #12100c; --fg-mod: #12100c; --fg-modstrong: #12100c; --fg-strong: #12100c; --fg-elite: #12100c; /* Band-coloured text ON the plate — in light mode these were darkened because a band light enough to need dark text is too light to BE text. On dark the relationship reverses and the band colour itself is legible. */ --txt-caution: #e2707a; --txt-spec: #e08540; --txt-mod: #ebcd76; --txt-modstrong: #4fae8c; --txt-strong: #7fdcb6; --txt-elite: #d8b654; /* ── Market balance scale ─────────────────────────────────────────────── */ --bal-sell2: #c04d63; --bal-sell: #e08540; --bal-bal: #ebcd76; --bal-buy: #3d9a7a; --bal-buy2: #7fdcb6; /* ── Accents ──────────────────────────────────────────────────────────── */ --forest: #4fae8c; --forest2: #7fdcb6; --green: #5cc79e; --green-t: #5cc79e; --olive: #a8c46a; --amber: #e0a84a; --burnt: #e08540; --brick: #e2707a; --brick2: #eb8f97; --red: #e2707a; --slate: #7ba3d0; --slate-rgb: 123,163,208; } /* ── Colourblind-safe palette, on the dark ground ────────────────────────── * * The live CB ramp is cream-calibrated: #002466 measures 1.31:1 and #294978 * 2.10:1 here — the bottom two bands of the ranking are simply not present. * This holds the blue→yellow structure that makes it CVD-safe and lifts the * floor clear of the plate. Against the LIVE CB ramp: separation ΔE 12.7 vs * 11.2, normal-vision 13.4 vs 12.0, and all five stops clear contrast where * two failed. Better than what ships today on every check. * Specificity (0,2,1) so it beats the dark block above. */ html[data-theme="dark"] body.cb-mode { --band-caution:#2f66b4; --band-spec:#6ba4e2; --band-mod:#8f8a80; --band-modstrong:#e5c266; --band-strong:#fff2ab; --band-elite:#fff8cf; --fg-caution:#f2f6fc; --fg-spec:#0b0f16; --fg-mod:#0b0906; --fg-modstrong:#0b0906; --fg-strong:#0b0906; --fg-elite:#0b0906; --txt-caution:#5b90d8; --txt-spec:#6ba4e2; --txt-mod:#a8a296; --txt-modstrong:#e5c266; --txt-strong:#fff2ab; --txt-elite:#fff8cf; --ramp0:#2f66b4; --ramp1:#6ba4e2; --ramp2:#8f8a80; --ramp3:#e5c266; --ramp4:#fff2ab; --bal-sell2:#2f66b4; --bal-sell:#6ba4e2; --bal-bal:#8f8a80; --bal-buy:#e5c266; --bal-buy2:#fff2ab; } /* ── Native form controls ────────────────────────────────────────────────── * * Without this, date pickers, selects and scrollbars keep rendering as light * widgets on a dark page — the single most common dark-mode tell. */ html[data-theme="dark"] { color-scheme: dark; } /* ── Surveyor bearing labels ─────────────────────────────────────────────── * * The traverse and closure figures on the landing page draw their bearing * calls ("N88°E 24.9 ch") with a HALO: a fat stroke painted behind the glyph * via paint-order, so a call stays readable where it crosses a survey line. * * Two things go wrong on the plate. * * 1. The halo is hardcoded #fff / #faf8f2 / #111318 — it was the paper colour, * which made it invisible. On a dark ground a cream halo is the brightest * thing on screen, and at 8px type it is most of what you see. A halo must * always be the SURFACE, never a colour: it is a knockout, not an object. * * 2. The stroke is 3–3.4px on 8–8.5px type. RenoVision_Demo's POI labels * settled on 2.2px for 10px serif, with the note that 3px "clogs the * counters ... and the labels read as outlined bubble text". These are * smaller type carrying a heavier stroke, so they clog worse. * * CSS rather than editing the three JS call sites, because CSS overrides SVG * presentation attributes — the same reasoning already recorded above the * #poi-layer rule in RenoVision_Demo.html. Scoped to dark, so light is * untouched by construction. */ html[data-theme="dark"] #trv text, html[data-theme="dark"] #clo text, html[data-theme="dark"] #fclose text { stroke: var(--paper); stroke-width: 2.2px; fill: var(--gold); opacity: .92; } /* ══════════════════════════════════════════════════════════════════════════ Dark plate · round 2 — market_profile's component layer ══════════════════════════════════════════════════════════════════════════ C4's patcher tokenised nine of the ten pages. market_profile kept 87 bare light literals in its