/* tokens.css — the color source of truth for EVERY surface.
Loaded as a plain by both templates/spa.html (the React SPA: landing,
firm app, staff console) and templates/base.html (the server-rendered allauth
/ MFA / request-access pages), so ONE file colors the whole product. It lives
in static/css/ rather than frontend/src/ precisely because those auth pages
cannot import from the Vite bundle — keep it dependency-free plain CSS.
FOUR selectable app palettes (Sand / Chancery / Slate Brief / Graphite) plus
the original dark "Command Brief" navy kept on bare :root. Every surface opts
into a palette via a `data-theme` attribute on : the firm app and the
staff console use the member's persisted choice (src/lib/theme.tsx), while
the public landing (/) and the auth pages are pinned to the product DEFAULT
("sand", stamped rather than read from localStorage) so a visitor always
meets the app as it ships. Bare :root is the dark fallback for anything that
somehow renders unstamped.
"Sand" is the landing's own register brought inside the product (the warm
sand + warm-white glass + ink system of frontend/src/landing2/ and
static/css/request-access.css). The triplets here are only half of it — the
glass itself (the fixed sand-field room, the translucent panes, the specular
edges) lives in frontend/src/styles/sand-glass.css, scoped to this theme, so
the other palettes stay byte-identical.
HOW IT STAYS DRY
- Each theme block redefines only the `--X-rgb` RGB *triplets*.
- One shared block (`:root { … }`, always matching ) composes those
triplets into plain rgb() forms + the canonical prototype role vars
(--g --su --we --li --ik --mu --fa --ac --ai --fl --ft --ok --ur + washes).
var() resolves against whichever triplets are active, so the derived block
recolors automatically per theme.
TAILWIND BRIDGE
tailwind.config.ts reads the same triplets as rgb(var(--X-rgb) / ), so
every `bg-deep`, `text-frost`, `border-line`, `text-cobalt`, `/opacity`
utility recolors for free. Existing Tailwind names are kept and REMAPPED to
the new roles: ink=Ground, deep/raised=Surface, well=Well, line=Line,
frost=Ink(text), muted=Muted, faint=Faint, cobalt=Accent, gold=Flag,
gold-bright=Flag-text, ok=OK, urgent=Urgent. Two new tokens: `ai`
(text-on-accent) and `hair` (theme-aware overlay via --ov-rgb — white on dark
themes, ink on light — so every `-white/N` overlay inverts correctly). */
/* ---- Command Brief (default / landing / staff) — the original navy ---- */
:root {
--ink-rgb: 6 10 20;
--deep-rgb: 11 18 32;
--well-rgb: 7 12 22;
--raised-rgb: 17 26 46;
--line-rgb: 28 37 52;
--line-strong-rgb: 42 54 80;
--frost-rgb: 234 241 255;
--muted-rgb: 147 161 188;
--faint-rgb: 112 128 152; /* 4.66 deep / 4.87 well / 4.93 ground */
--cobalt-rgb: 94 143 204;
--cobalt-bright-rgb: 127 168 220;
--cobalt-deep-rgb: 90 132 178; /* still recedes from --cobalt, but carries dark --ai at 4.79:1 */
--gold-rgb: 217 171 86;
--gold-bright-rgb: 239 207 143;
--ok-rgb: 69 165 125;
--urgent-rgb: 224 92 110;
/* Dark ground means the accents are LIGHT, so text sitting on a solid accent
fill has to be dark ink — same call graphite already makes. Light-on-accent
measured 1.87:1 on gold and 2.95:1 on cobalt. */
--ai-rgb: 11 18 32;
--ov-rgb: 255 255 255; /* overlays lift with white on the dark ground */
color-scheme: dark;
}
/* ---- Slate Brief (app default) — cool paper, light ---- */
[data-theme="slate"] {
--ink-rgb: 238 241 245;
--deep-rgb: 255 255 255;
--well-rgb: 228 233 240;
--raised-rgb: 255 255 255;
--line-rgb: 220 226 234;
--line-strong-rgb: 200 208 219;
--frost-rgb: 21 25 34;
--muted-rgb: 76 84 97;
--faint-rgb: 92 100 112; /* clears AA on ALL three surfaces: 5.28 ground / 4.90 well / 5.98 card */
--cobalt-rgb: 35 66 140;
/* On a light ground BOTH ends of the ladder must stay dark: `bright` carries
text (54 `text-cobalt-bright` sites) and `deep` is used as a solid fill
under --ai (white). Inverting `deep` to a pale wash would read 1.79:1. */
--cobalt-bright-rgb: 20 44 100;
--cobalt-deep-rgb: 58 96 176;
--gold-rgb: 166 88 36; /* white --ai on this fill: 5.19:1 */
/* Flag TEXT almost always sits on a gold WASH (bg-gold/10-15), not on bare
white, so it is tuned against that: 6.06 on white, 4.95 on gold/15,
4.72 on a gold wash over the page ground. */
--gold-bright-rgb: 150 80 32;
--ok-rgb: 23 114 78;
--urgent-rgb: 168 53 53;
--ai-rgb: 255 255 255;
--ov-rgb: 21 25 34;
color-scheme: light;
}
/* ---- Sand (app default) — the landing's warm sand glass, light ----
Ink and ground are the landing's measured values (#2e1f13 on #f6ecdd); the
rest is derived for AA on this theme's effective surfaces, which are
TRANSLUCENT panes over the scrim-lifted sand field. Ratios below are against
the worst case, a conservative dark dune patch (#efe3cf) — every surface the
app actually paints is brighter than that. */
[data-theme="sand"] {
--ink-rgb: 246 236 221; /* the plate — what shows before/without the field */
--deep-rgb: 255 252 245; /* the warm-white glass hue (fills take alpha in sand-glass.css) */
--well-rgb: 240 229 211;
--raised-rgb: 255 253 246;
--line-rgb: 224 210 188;
--line-strong-rgb: 205 188 161;
--frost-rgb: 46 31 19; /* the landing's ink — 12.5:1 worst case */
--muted-rgb: 106 92 79; /* 5.08 dune / 5.69 pane / 6.18 menu */
--faint-rgb: 111 97 82; /* 4.72 dune / 5.28 pane / 5.74 menu — AA everywhere */
/* A dustier steel than Chancery's — the one cool family on a warm page, so it
is desaturated toward slate. Base carries white --ai at 7.85 (solid CTA);
`bright` is the text carrier (9.71 dune); `deep` is a border/fill step that
still holds white at 5.60. */
--cobalt-rgb: 48 84 122;
--cobalt-bright-rgb: 26 54 86;
--cobalt-deep-rgb: 66 106 152;
/* Flag = the landing's bronze family taken down to text weight: the star
bronze #c8912b fails as text on sand, so the fill sits at 4.9+ under
near-white text and the flag TEXT is darker still (4.72 on a gold wash
over a pane, 4.78 on bare ground). */
--gold-rgb: 139 102 29;
--gold-bright-rgb: 128 92 26;
--ok-rgb: 35 105 70; /* 5.21 dune */
/* The register's own error color — the burnt sienna authored for the
request-access flow (--ra-alarm), not the app's cool red: 5.33 as text on
the dune, 6.76 under white on a solid fill. */
--urgent-rgb: 158 59 38;
--ai-rgb: 255 255 255;
--ov-rgb: 46 31 19; /* overlays lift with warm ink on the light ground */
color-scheme: light;
}
/* ---- Chancery — warm ivory, light ---- */
[data-theme="chancery"] {
--ink-rgb: 244 239 230;
--deep-rgb: 255 255 255;
--well-rgb: 236 229 216;
--raised-rgb: 255 255 255;
--line-rgb: 228 219 203;
--line-strong-rgb: 214 203 180;
--frost-rgb: 28 24 19;
--muted-rgb: 87 79 68;
--faint-rgb: 103 95 81; /* 5.50 ground / 5.03 well / 6.30 card */
--cobalt-rgb: 35 90 140;
--cobalt-bright-rgb: 19 58 96;
--cobalt-deep-rgb: 56 120 174;
/* The flag FILL is darkened to the same value the flag TEXT already uses:
white --ai on the old 185 138 42 measured 3.12:1, the worst pair in the set. */
--gold-rgb: 143 106 31;
--gold-bright-rgb: 143 106 31; /* flag text is darkened for contrast on ivory */
--ok-rgb: 37 107 72;
--urgent-rgb: 163 48 47;
--ai-rgb: 255 255 255;
--ov-rgb: 28 24 19;
color-scheme: light;
}
/* ---- Graphite — warm charcoal, dark ---- */
[data-theme="graphite"] {
--ink-rgb: 27 26 23;
--deep-rgb: 37 36 32;
--well-rgb: 21 20 18;
--raised-rgb: 37 36 32;
--line-rgb: 56 53 46;
--line-strong-rgb: 74 70 61;
--frost-rgb: 243 240 232;
--muted-rgb: 195 188 173;
--faint-rgb: 154 149 136; /* 5.82 ground / 6.16 well / 5.20 card */
--cobalt-rgb: 131 176 223;
/* Dark ground, so the ladder runs the other way: `bright` lifts, `deep`
recedes — but `deep` stays light enough for the dark --ai ink on a fill. */
--cobalt-bright-rgb: 184 214 245;
--cobalt-deep-rgb: 96 138 186;
--gold-rgb: 211 166 79;
--gold-bright-rgb: 211 166 79;
--ok-rgb: 107 190 147;
--urgent-rgb: 230 124 134;
--ai-rgb: 27 26 23; /* dark ink on the light accent fills */
--ov-rgb: 255 255 255;
color-scheme: dark;
}
/* ---- Derived once — resolves against the active theme's triplets ---- */
:root {
/* Composed rgb() forms (plain CSS + inline styles + legacy consumers) */
--ink: rgb(var(--ink-rgb));
--deep: rgb(var(--deep-rgb));
--well: rgb(var(--well-rgb));
--raised: rgb(var(--raised-rgb));
--line: rgb(var(--line-rgb));
--line-strong: rgb(var(--line-strong-rgb));
--frost: rgb(var(--frost-rgb));
--muted: rgb(var(--muted-rgb));
--faint: rgb(var(--faint-rgb));
--cobalt: rgb(var(--cobalt-rgb));
--cobalt-bright: rgb(var(--cobalt-bright-rgb));
--cobalt-deep: rgb(var(--cobalt-deep-rgb));
--gold: rgb(var(--gold-rgb));
--gold-bright: rgb(var(--gold-bright-rgb));
--gold-wash: rgb(var(--gold-rgb) / 0.1);
--ok: rgb(var(--ok-rgb));
--urgent: rgb(var(--urgent-rgb));
/* Canonical prototype role vars — for inline SVG / wash styles in new code */
--g: var(--ink); /* Ground */
--su: var(--deep); /* Surface */
--we: var(--well); /* Well */
--li: var(--line); /* Line */
--ik: var(--frost); /* Ink (text) */
--mu: var(--muted); /* Muted */
--fa: var(--faint); /* Faint */
--ac: var(--cobalt); /* Accent */
--ai: rgb(var(--ai-rgb)); /* text on accent/flag/urgent fills */
--fl: var(--gold); /* Flag */
--ft: var(--gold-bright); /* Flag text (readable variant) */
--hair: rgb(var(--ov-rgb)); /* overlay base (used by the `hair` Tailwind token) */
/* washes / attention borders at ~8–14% alpha of accent/flag/urgent */
--rw: rgb(var(--cobalt-rgb) / 0.1);
--fw: rgb(var(--gold-rgb) / 0.12);
--fb: rgb(var(--gold-rgb) / 0.4);
--uw: rgb(var(--urgent-rgb) / 0.09);
--ub: rgb(var(--urgent-rgb) / 0.32);
/* Legacy CSS-var aliases (viz.css .im-* surfaces, older inline styles).
Kept pointing at the composed forms so they recolor per theme too. */
--abyss: var(--ink);
--depth: var(--deep);
--volt: var(--cobalt);
--ion: var(--cobalt-bright);
--plasma: var(--cobalt);
--signal: var(--ok);
--warn: var(--gold);
--alert: var(--urgent);
}