/* ============================================================ Feedwrk design tokens — single source of truth. Import once, globally (e.g. in app/layout.tsx). These mirror dev.feedwrk.com (cool-slate restyle, Jul 2026). Never hardcode a raw value in a component; reference a token. TWO LAYERS, AND WHY (ONE SYSTEM · G, 2026-08-10) ------------------------------------------------ Everything used to be one layer of literals: `--surface:#ffffff` named a COLOUR, not a JOB. That is why the product had no theme seam — there was nowhere to re-point. `#ffffff` is true of the light theme and of nothing else. So the top block below is the SEMANTIC layer: `--bg-surface` says what the colour is FOR. Every historical name survives underneath it as an alias (`--surface:var(--bg-surface)`), so all 988 compat classes keep referencing the names they always did and keep resolving to the same pixels. Nothing in the product changed; there is now a seam. The light values here are TODAY'S values, moved — not new colours. The only new values in this file are in the `[data-theme="dark"]` block, and they are the spec's, with the computed contrast receipts in `WSV3_Design_System_Update_2026-08-10.html` §6. --bg-raised and --bg-overlay resolve to --bg-surface on light. They are not redundant: they exist so dark has somewhere to differ, and on dark they do. THE DARK BLOCK IS WIRED TO NOTHING. There is no toggle, no cookie, no setting, and deliberately no `prefers-color-scheme` query — set `data-theme="dark"` by hand in devtools to see it. Shipping the seam and shipping the switch are different decisions; the switch is a separate lane. ============================================================ */ :root{ color-scheme:light; /* --- semantic surfaces (the enabler — every surface name aliases these) --- */ --bg-canvas:#f5f7fa; /* page background */ --bg-surface:#ffffff; /* cards, inputs, table body */ --bg-sunken:#eceff4; /* recessed: segmented track, progress track, placeholder */ --bg-raised:#ffffff; /* lifted above surface — same as surface on light, lighter on dark */ --bg-overlay:#ffffff; /* popovers, menus, modals — same as surface on light, lighter on dark */ /* --- semantic borders --- */ --border-subtle:#e3e8ef; /* default borders, table lines */ --border-strong:#ccd3de; /* stronger dividers */ /* --- semantic ink --- */ --text-primary:#1a2533; /* headings, primary text */ --text-body:#2a2a30; /* body */ --text-secondary:#586273; /* secondary */ --text-muted:#8b94a3; /* muted / placeholder */ /* --- accents --- */ --voltage:#5b3df5; /* primary: main actions, selection, active tab */ --voltage-hover:#4928e5; --voltage-press:#3a1fcc; --voltage-tint:#ece7fe; /* selected-row / active wash */ /* --voltage-ink is the accent as TEXT, which is a different job from the accent as a FILL and needs a different value the moment the background is dark. On light the two coincide; on dark they must not (see the dark block). */ --voltage-ink:#5b3df5; --citrus:#d4ff3f; /* attention: do-next chips, secondary CTA */ --citrus-hover:#c1ed2c; --on-accent:#fff; /* text/icons on voltage or ink fills */ /* --- ink + line aliases (the historical names — all 988 consumers use these) --- */ --ink-1:var(--text-primary); --ink-2:var(--text-body); --ink-3:var(--text-secondary); --ink-4:var(--text-muted); --ink-5:#b8b8c0; /* disabled / faint — no semantic name yet, still literal */ --rule:var(--border-subtle); --rule-strong:var(--border-strong); --canvas:var(--bg-canvas); --surface:var(--bg-surface); --surface-sunken:var(--bg-sunken); /* legacy M3 surface-ramp aliases — kept so any consumer referencing the M3 ramp names resolves to canon (master and app agree on the mapping). */ --surface-container:var(--surface); --surface-container-high:var(--surface-sunken); --surface-container-highest:var(--rule); /* --- signals (status only) --- */ --signal-green:#2ba471; --signal-green-tint:#e3f6ec; --signal-green-ink:#1d7a53; --signal-amber:#f0a412; --signal-amber-tint:#fdf1d6; --signal-amber-ink:#845a05; --signal-red:#e5484d; --signal-red-tint:#fce9ea; --signal-red-ink:#b4282d; /* --- state --- */ --state-hover:color-mix(in oklab,#0a0a0b 6%,transparent); --state-press:color-mix(in oklab,#0a0a0b 10%,transparent); /* --- spacing (8px base; 4px half-step) --- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; /* --- radius --- */ --r-1:4px; --r-2:8px; --r-3:12px; --r-pill:999px; /* --- control heights --- */ --ctl-h:40px; --ctl-h-sm:32px; /* --- elevation (soft, restrained scale — the app stays mostly flat) --- */ --shadow-xs:0 1px 2px rgba(10,10,11,.04); /* barely-there lift: tile / row hover */ --shadow-sm:0 2px 8px rgba(10,10,11,.05); /* raised / selectable card hover */ --shadow-pop:0 8px 24px rgba(10,10,11,.12); /* menus, popovers, toasts */ --shadow-modal:0 30px 80px -20px rgba(10,10,11,.45),0 8px 24px -12px rgba(10,10,11,.3); /* layered: product / detail modal */ --shadow-drawer:-8px 0 32px rgba(10,10,11,.12); /* side panels */ /* --- motion --- */ --motion-fast:120ms; --motion-base:180ms; --motion-slow:240ms; --ease-standard:cubic-bezier(.2,0,0,1); /* default enter / exit */ --ease-spring:cubic-bezier(.32,.72,0,1); /* drawers, sheets, bulk bar — the designed spring */ /* --- focus ring --- */ --focus:0 0 0 3px color-mix(in oklab,var(--voltage) 35%,transparent); /* --- z-index scale --- */ --z-sticky:2; --z-float:40; --z-scrim:50; --z-overlay:51; --z-toast:60; /* --- type --- */ /* Prefer the app's self-hosted next/font families (exposed as --font-*-next); fall back to the plain family name for standalone use (styleguide, prototypes). */ --font-sans:var(--font-sans-next,"Inter"),ui-sans-serif,system-ui,-apple-system,sans-serif; --font-mono:var(--font-mono-next,"JetBrains Mono"),ui-monospace,Menlo,monospace; /* --- type scale (JUR-585) --- Seven steps, --fs-1..--fs-7, plus --fs-8 for the display size. Before this the app rendered 20 distinct sizes off 640 hand-authored declarations and there was NO font-size token anywhere in this file — every size in the product was a literal. The steps are not invented: they are the measured clusters of what the app already ships, so most of the migration is a rounding of neighbours onto a step (13.5→13, 12.5→12, 10.5→10) rather than a restyle. Counts below are authored DECLARATIONS across the four style layers, measured by walking declarations with comments stripped — a grep cannot see the 100 sizes hidden inside the `font:` shorthand. --fs-8 EARNS ITS PLACE. It is the one step a seven-step ramp would not cover: the display size on page/hero titles. Owner call — keep it. */ --fs-1:10px; /* ← 9, 9.5, 10, 10.5 · 35 decls · micro: meta, timestamps */ --fs-2:11px; /* ← 11, 11.5 · 114 decls · small: SKU, captions */ --fs-3:12px; /* ← 12, 12.5 · 177 decls · secondary UI text */ --fs-4:13px; /* ← 13, 13.5 · 195 decls · body + table cell */ --fs-5:15px; /* ← 14, 14.5, 15, 16 · 70 decls · section + page titles */ --fs-6:18px; /* ← 17, 18, 19 · 12 decls · subsection heads */ --fs-7:21px; /* ← 20, 21, 22 · 10 decls · large heads */ --fs-8:26px; /* ← 24, 26, 28, 30 · 10 decls · display / hero */ /* --- type tracking --- */ --track-tight:-0.022em; /* large headings */ --track-eyebrow:0.06em; /* uppercase mono eyebrows / labels */ --track-mono:-0.01em; /* dense mono data */ } /* ============================================================ DARK — 20 re-pointed values, and that is the whole theme. NOTHING SETS THIS ATTRIBUTE. Not a toggle, not a cookie, not a setting, and deliberately not `prefers-color-scheme` — a media query would ship dark mode to every user with a dark OS the moment this merges, which is not the decision being made here. `grep -rn "data-theme" src --include=*.tsx` returns zero by design. To QA it: devtools → → add data-theme="dark". The values are the spec's (WSV3_Design_System_Update_2026-08-10.html §3), with §6's computed contrast receipts. Do not tune them here; if one is wrong, report the measured ratio and change the spec. THREE RULES THIS BLOCK OBEYS, worth knowing before you extend it: 1. ELEVATION LIGHTENS, IT NEVER DARKENS. A drop shadow is a light-mode tool — on a #0b0f16 canvas a dark shadow is invisible. Height is expressed as a LIGHTER surface (--bg-raised, --bg-overlay), which is the entire reason those two tokens exist. --shadow-xs/-sm therefore go to `none`. 2. THE ACCENT AS TEXT IS NOT THE ACCENT AS A FILL. --voltage:#6e50fa is a fill that white sits on at 5.01:1. As TEXT on the canvas it would be 3.4:1 and fail. --voltage-ink:#a996ff is the text value. They are deliberately two different colours, not one colour used twice. 3. HAIRLINES INVERT AS ALPHA, NOT AS HEX. --border-subtle is rgba(255,255,255,.08), so a border reads correctly on canvas, on surface and on a raised panel alike. A fixed hex would only be right on one. ============================================================ */ [data-theme="dark"]{ color-scheme:dark; /* --- semantic surfaces: height is expressed as lightness --- */ --bg-canvas:#0b0f16; --bg-surface:#131922; --bg-sunken:#1a212c; --bg-raised:#1e2632; --bg-overlay:#212a37; /* --- borders as alpha, so one value is right on every surface --- */ --border-subtle:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16); /* --- ink --- */ --text-primary:#e9eef6; --text-body:#d2dae5; --text-secondary:#97a3b4; --text-muted:#6d7889; /* --- accents --- */ --voltage:#6e50fa; --voltage-ink:#a996ff; --voltage-tint:rgba(110,80,250,.22); /* DERIVED, not in the spec — §3 gives dark --voltage but not its hover/press. On light these two DARKEN the accent; on dark that direction is wrong (a hover would recede), so they lighten by the mirrored amount. Expressed as a mix of the spec's own value rather than as two new hexes. */ --voltage-hover:color-mix(in oklab,var(--voltage) 80%,#fff); --voltage-press:color-mix(in oklab,var(--voltage) 64%,#fff); /* --ink-5 is faint-relative-to-muted, which on light means LIGHTER and on dark means DARKER. Derived by fading the muted ink toward the canvas so it keeps that relationship instead of hard-coding a sixth grey. */ --ink-5:color-mix(in oklab,var(--text-muted) 72%,var(--bg-canvas)); /* --- signals: the tint darkens, the ink brightens to sit on it --- */ --signal-green:#3ecf8e; --signal-green-tint:#1a3633; --signal-green-ink:#3ecf8e; --signal-amber:#fbbf4d; --signal-amber-tint:#383429; --signal-amber-ink:#fbbf4d; --signal-red:#ff6369; --signal-red-tint:#39252d; --signal-red-ink:#ff6369; /* --- state: the wash is white on dark, not black --- */ --state-hover:rgba(255,255,255,.05); --state-press:rgba(255,255,255,.09); /* --- elevation: lightens, never darkens (rule 1 above) --- */ --shadow-xs:none; --shadow-sm:none; --shadow-pop:0 8px 28px rgba(0,0,0,.55); /* DERIVED, not in the spec — §3 gives dark --shadow-pop but not the two heaviest. A modal and a drawer still need to separate from the scrim, and the scrim is already black, so these follow --shadow-pop's shape: pure black at a higher alpha rather than the light theme's near-black ink. */ --shadow-modal:0 30px 80px -20px rgba(0,0,0,.7),0 8px 24px -12px rgba(0,0,0,.5); --shadow-drawer:-8px 0 32px rgba(0,0,0,.55); }