/* ============================================================================ tokens.css — the only place a colour is allowed to be written as a hex value. Must load BEFORE every other stylesheet. Two layers, and the split is the whole point: Layer 1 raw palette. Never referenced by a component. Layer 2 semantic roles. The only thing a component may use. Components say var(--danger), never var(--red-600). That indirection is what makes dark mode the ~40 lines at the bottom of this file instead of a second pass over all 151 KB of CSS. Consolidation note: the app had grown four neutral ramps (Tailwind slate, Tailwind gray, raw #333/#555/#ccc, Bootstrap #f8f9fa/#dee2e6), two greens (green + emerald) and three warns (amber + orange + Bootstrap yellow). Each family below lists the values it replaces so a find/replace can be verified rather than trusted. ========================================================================= */ :root { /* ── Layer 1: raw palette ───────────────────────────────────────────── */ /* THE navy. One value. The app had grown five of them — #00093d, #001060, #0d1b6e, #001160, #001a78, #001a85 — none distinguishable from the next. Every shade below is mixed from this one, so changing this line restyles the whole app and the shades can never drift apart again. */ --navy: #00093d; --navy-lift: color-mix(in srgb, var(--navy), white 14%); /* hover on navy */ --navy-lift2: color-mix(in srgb, var(--navy), white 24%); /* pressed/active */ --navy-pale: color-mix(in srgb, var(--navy), white 55%); /* navy on a dark bg */ } /* color-mix() needs Safari 16.2 / Chrome 111. Without this guard an older browser resolves those three to an invalid value, and anything painted with them falls back to transparent — buttons and the sidebar would lose their fill entirely. These are the mixes above, resolved by hand. */ @supports not (color: color-mix(in srgb, red, blue)) { :root { --navy-lift: #1c2456; --navy-lift2: #2f3668; --navy-pale: #8089ae; } } :root { /* Neutrals — Tailwind slate. Absorbs gray, the raw greys and Bootstrap's. */ --slate-50: #f8fafc; /* also #f8f9fa #f7f8fa #f0f0f0 */ --slate-100: #f1f5f9; /* also #f3f4f6 #eee */ --slate-200: #e2e8f0; /* also #e5e7eb #dee2e6 #ddd */ --slate-300: #cbd5e1; /* also #ccc */ --slate-400: #94a3b8; --slate-500: #64748b; /* also #6b7280 #555 */ --slate-600: #475569; --slate-700: #334155; /* also #374151 #333 */ --slate-800: #1e293b; /* also #1f2937 */ --slate-900: #0f172a; /* also #111827 #000 */ --slate-950: #020617; /* near-black, and the dark theme's page bg */ --white: #ffffff; /* absorbs #fff — 196 uses across both spellings */ /* Success — green. Absorbs emerald (#10b981 #047857 #d1fae5 #a7f3d0 #ecfdf5). */ --green-50: #f0fdf4; --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --green-900: #14532d; /* Danger — red. */ --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; /* Warn — amber. Absorbs orange (#ea580c #9a3412 #7c2d12 #fed7aa #ffedd5 #fff7ed), Bootstrap yellow (#ffc107) and #fef9c3. #ffba08 is the existing brand-ish accent at 73 uses, kept as the 400. */ --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-400: #ffba08; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; /* Link blue. Deliberately its own ramp, not borrowed from indigo (info) or navy (brand): a link has to be distinguishable at a glance from a status badge and from a button, and navy reads as "heading" rather than "clickable" in a table cell. */ --blue-600: #2563eb; --blue-400: #60a5fa; /* Info — indigo. Absorbs blue (#dbeafe #eff6ff #1d4ed8). */ --indigo-50: #eef2ff; --indigo-100: #dbeafe; --indigo-500: #6366f1; --indigo-700: #3730a3; /* ── Layer 2: semantic roles — components use ONLY these ────────────── */ /* Surfaces & text */ --surface: var(--white); --surface-sunken: var(--slate-50); /* page background behind cards */ --surface-hover: var(--slate-100); /* Two jobs, two roles. --border divides things that are already distinct: a table row from the next, a card from the page. It can be quiet. --border-strong draws the EDGE OF A CONTROL — an input, a select, an outlined button. That edge is the only thing saying "you can type here", so it has to be seen. On white, slate-200 measured 1.23 against the background: present in the DOM, absent to the eye, which is why the filter strip looked like floating text. Both step darker here. The dark theme keeps its own values below, where a card is lighter than the page and the surface change carries the edge on its own. */ --border: var(--slate-300); --border-subtle: var(--slate-200); --border-strong: var(--slate-400); /* Text on white, each role one step darker than it was. Measured against #ffffff, the old values were: --text #0f172a 17.85 AAA --text-muted #64748b 4.76 AA, only just --text-subtle #94a3b8 2.56 FAILS AA outright --text-subtle failing is why so much of the light theme read as washed out: it carries captions, table meta, timestamps and field labels — a large share of the words on any page. The dark theme never showed it because its equivalents sit at 14.5 / 6.96 / 3.75, where lightening a role moves it AWAY from the background. On white, lightening moves it toward the background, and the headroom runs out fast. Now 20.17 / 7.58 / 4.76 — AAA, AAA, AA. */ --text: var(--slate-950); --text-muted: var(--slate-600); --text-subtle: var(--slate-500); /* Brand */ --brand: var(--navy); --brand-hover: var(--navy-lift); --on-solid: var(--white); /* Links — the ONE text-clickability affordance in the app. Rule, and it is not a style preference: text carrying --link MUST navigate. Text that does not navigate must never borrow it, and must never take an underline or cursor:pointer to look important. The app grew a class (.rpt-board-branch) used on both and with identical styling and a hover underline, so half the "links" in the credits and dashboard tables led nowhere. One role, one meaning. Blue, and its own ramp rather than an alias of --brand or --info. Navy reads as "heading" in a table cell, not "clickable", and indigo is already spoken for by the info status family — a link has to be distinguishable at a glance from both. It lifts to #60a5fa on dark for the same reason the solid status colours do: #2563eb on #0f172a is legible but joyless, and links are meant to be found. */ --link: var(--blue-600); --link-hover: var(--blue-400); /* The chevron on a