/* ============================================================
Gantry design tokens — SINGLE SOURCE OF TRUTH
------------------------------------------------------------
Consumed by every surface (the served URL is /ui/ even though the
directory is design-system/ — nginx aliases one to the other):
surfaces/web/ (nginx /ui/ location)
surfaces/admin/ (same nginx server)
surfaces/chrome/ bundled copy at surfaces/chrome/tokens.css
(`make ui-sync`)
surfaces/www/ bundled copy at surfaces/www/tokens.css
(`make ui-sync`, deploy script)
storybook imported by .storybook/preview.js
Edit HERE only. Run `make ui-sync` after changes so the bundled
copies (extension, www) pick them up. Brand palette definitions live
in design-system/brand-kit/README.md; logo geometry in
design-system/brand-kit/generate.py.
2026-08-04: EDITORIAL OVERHAUL. The whole system moved to an
editorial, print-inspired look: neutral ink/paper palettes (the warm
putty light theme and petrol-blue brand structure are gone), hairline
borders instead of shadows, near-square radii, and a display serif
(Newsreader) alongside Geist. --brand moved from Signal Teal to GOLD
(#D49F18) — John's call 2026-08-04, breaking from default-AI teal.
--warn therefore shifted from amber to clear ORANGE so status never
reads as brand. Theme defaults: dark for admin/chrome (both rely on the
:root dark block below, which is why an UNSET data-theme must stay dark),
light for www (the marketing site sets data-theme="light" itself). The
web app follows the device's prefers-color-scheme and falls back to
light, so it always sets data-theme explicitly and never inherits :root.
2026-07-05 (historical): --brand amber → teal; now teal → gold.
============================================================ */
:root {
/* Type */
--font-sans: "Geist", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Display serif — headings, editorial pull-quotes, big numerals.
NEVER body/UI text: labels, controls and tables stay on --font-sans. */
--font-serif: "Newsreader", Georgia, "Times New Roman", serif;
/* Accent (status) palette — shared across themes.
--warn is ORANGE (not amber): brand gold owns the yellow range. */
--good: #16b977;
--good-glow: #16b97733;
--warn: #e36209;
--warn-glow: #e3620933;
--bad: #d94a4a;
--bad-glow: #d94a4a33;
/* Informational — neutral notices that are neither a success, a warning nor
a failure (e.g. "sampling to the export limit"). */
--info: #3b82f6;
--info-glow: #3b82f633;
/* Brand — gold pair (mark node / accents) + neutral structure colors
for rendering the mark on light/dark surfaces. */
--brand-gold: #A8790E; /* Deep Gold — accent on light surfaces */
--brand-gold-bright: #D49F18; /* Gantry Gold — canonical; accent on dark */
--brand-ink: #131312; /* Ink — mark strokes on light */
--brand-mist: #F4F3EF; /* Paper Mist — mark strokes on dark */
--deep-slate: #0e0f10; /* Deep Slate — permanent dark band color
(email header, auth panel, www footer) */
/* Map data ramp — the explore hero's hex columns, org dots and heat
layers. A sequential magenta → yellow scale (kepler.gl's "Global
Warming" range), adopted 2026-07-27 as a deliberate AESTHETIC choice:
John picked it over the status palette knowing it reads less clearly,
because the map is the product's hero image before it is a chart.
Ordering is preserved end to end — --map-1 is the low/worst stop and
--map-5 the high/best one — so the ramp still encodes the same
direction the good/warn/bad buckets did.
NOT interchangeable with --good/--warn/--bad: those stay the status
vocabulary everywhere OFF the map (pills, coverage dots, meters).
Untouched by the 2026-08-04 overhaul on purpose. */
--map-1: #5A1846;
--map-2: #900C3F;
--map-3: #C70039;
--map-4: #E3611C;
--map-5: #FFC300;
/* Radii / motion — near-square is the system voice; --r-pill is the
ONE round exception (chips, pills, avatar). */
--r-xs: 0px;
--r-sm: 2px;
--r-md: 3px;
--r-lg: 4px;
--r-pill: 999px;
--ease: cubic-bezier(.2,.7,.2,1);
}
/* ---- Dark (default) ---- */
:root,
[data-theme="dark"] {
color-scheme: dark;
--brand: var(--brand-gold-bright);
--brand-glow: #d49f1833;
--on-brand: #131312; /* text/icon color on brand-filled surfaces */
--brand-text: var(--brand-gold-bright); /* brand-colored SMALL text (8.2:1 on --bg) */
/* Heat ramp — health-concern BURDEN, 0 → 10 (the discipline heatmap and the
Explore map's burden layer). A COOL single-hue ramp on purpose: the map's
points are the WARM --map-* ramp, and the burden layer draws UNDER them,
so the two colour systems must never be read as one (John, 2026-09-29).
Measured against the points as drawn (fill at 55% over the dark basemap):
CIEDE2000 >= 43 from every point colour, >= 20 under deutan/protan
simulation; lightness rises monotonically and stays below the point
cores, so a glowing point is always the brightest thing on the map.
Per-theme values — unlike --map-*, a heatmap has to earn its own
contrast on each canvas. */
--heat-1: #12313D;
--heat-2: #154A63;
--heat-3: #1A678C;
--heat-4: #2A86B8;
--heat-5: #4FA6DC;
--bg: #0a0a0a;
--bg-1: #0f0f0f;
--bg-2: #141414;
--bg-3: #1a1a1a;
--bg-hover: #1f1f1f;
/* Theme-INVARIANT well for third-party artwork (company logos): marks are
drawn for light surfaces, so the well stays white in both themes — the
same convention business directories use in dark mode. */
--art-well: #ffffff;
--line: #262626;
--line-2: #2e2e2e;
--line-strong: #404040;
--fg: #ededed;
--fg-2: #b4b4b4;
--fg-3: #878787;
--fg-4: #5c5c5c;
/* Hairlines carry structure; shadows exist only to lift overlays
(drawer, modal, menus) off the page. */
--shadow-lg: 0 24px 60px -28px rgba(0,0,0,.65), 0 6px 18px -10px rgba(0,0,0,.5);
--shadow-md: 0 8px 24px -16px rgba(0,0,0,.55);
--grid: rgba(255,255,255,.04);
/* Activity ramp — the calendar heat grid's five levels ().
A single-hue GOLD sequence, brand at the top: the grid reads as one
quantity getting larger, which a status palette (red→green) would
mis-state as a quality getting better.
--activity-0 is deliberately OFF the ramp — an empty well, so a quiet
day never reads as a faintly busy one. */
--activity-0: #1c1c1b;
--activity-1: #4a3a10;
--activity-2: #7a5f14;
--activity-3: #a87e16;
--activity-4: #d49f18;
}
/* ---- Light ---- */
[data-theme="light"] {
color-scheme: light;
--brand: var(--brand-gold);
--brand-glow: #a8790e2e;
--on-brand: #ffffff; /* white clears AA on Deep Gold (large/UI) */
--brand-text: #7a570a; /* darker gold: 6.5:1 on --bg for small text */
/* Heat ramp (light) — pale → deep blue; fill at 50% over the light
basemap measures CIEDE2000 >= 40 from the darkened point stops. See the
dark block for the doctrine. */
--heat-1: #DDEBF3;
--heat-2: #AFCDE3;
--heat-3: #77A7CF;
--heat-4: #4379B3;
--heat-5: #1F4F8F;
--bg: #ffffff;
--bg-1: #fafafa;
--bg-2: #ffffff;
--bg-3: #f4f4f3;
--bg-hover: #efefee;
--art-well: #ffffff; /* theme-invariant — see the dark block */
--line: #e5e5e5;
--line-2: #d9d9d9;
--line-strong: #b3b3b3;
--fg: #111110;
--fg-2: #3f3f3d;
--fg-3: #6f6f6c;
--fg-4: #9b9b97;
--shadow-lg: 0 20px 48px -28px rgba(15,15,14,.16), 0 4px 14px -8px rgba(15,15,14,.10);
--shadow-md: 0 6px 18px -12px rgba(15,15,14,.10);
--grid: rgba(0,0,0,.045);
/* Activity ramp — see the dark block. Light surfaces run the sequence the
other way (pale → deep gold), the direction still low → high. */
--activity-0: #ecebe7;
--activity-1: #ecd9a4;
--activity-2: #dcb95e;
--activity-3: #bd9420;
--activity-4: #8a620b;
}