/* tokens.css — the single source of truth for colour and type. * * RESTYLED 2026-08-04 to the Finance page's warm palette, per Marco: the whole * OS matches Finance now. Workspace identity hues are deliberately KEPT — they * are data-coding across the nexus and cards, not decoration. * * WHY THIS FILE EXISTS: styles.css and m.css each carried their OWN copy of the * :root block, identical hex for hex, with a comment in m.css that read "same * values as styles.css". Two places holding one number is the bug that keeps * finding this project. Both pages now link this file first and neither * declares a colour token of its own. * * DARK IS THE DEFAULT and stays byte-identical to what shipped — this file was * introduced as a pure refactor, so a light mode could be added without also * changing the look of the dark one. * * LIGHT IS AUTHORED, NOT INVERTED. The dark ramp carries a promise that * dim/faint hold >=4.5:1 on every surface because they render real content at * micro sizes. Inverting hex values does not preserve a contrast ratio, so * every light value below was computed and checked against all three light * surfaces (bg, panel, panel-deep) before being written here. Worst text ratio * dark 4.64, light 5.02 — the light ramp is the slightly safer of the two. * * The theme is chosen by a data-theme attribute on , set by an inline * script in the BEFORE first paint. Without that the page renders dark * and repaints, which is the white-flash every hand-rolled theme toggle has. */ :root { /* ── surfaces ─────────────────────────────────────────────── */ --bg: #121416; --panel: #1A1D20; --panel-2: #1D2024; /* The recessed surface behind feeds, modals, and the whiteboard. */ --panel-deep: #17191C; --line: #2C3136; --line-2: #33383D; --line-3: #3A4046; /* ── text ramp ────────────────────────────────────────────── */ --text: #ECEAE5; --text-2: #C6C8C4; --muted: #8F949B; /* dim/faint hold >=4.5:1 on every surface (bg, panel, panel-deep) — they carry real content (timestamps, units, staleness notes) at micro sizes, where contrast matters most. Hierarchy survives via size + tracking. */ --dim: #858B93; --faint: #7E848C; --bright: #F4F2ED; /* ── workspaces ─────────────────────────────────────────────── Each has three roles: the accent itself, a lighter text tint, and a dim background wash. These used to be hardcoded hexes inside app.js / m.js, which meant a theme switch could not reach them - the dim washes in particular are near-black and would have rendered as dark blocks on a light page. */ --car: #1E9E74; --car-text: #7FBFA3; --car-dim: #12241C; --mg: #17B0C4; --mg-text: #6FC6D2; --mg-dim: #0F1D22; --cam: #5B7FE0; --cam-text: #8FA8EC; --cam-dim: #111731; --sc: #9B7BEB; --sc-text: #A78BE8; --sc-dim: #181430; --personal: #E05B5B; --personal-text: #E08A8A; --personal-dim: #221316; --notes: #E8E6E1; --notes-text: #B9BFC8; --notes-dim: #20211F; /* ── status ───────────────────────────────────────────────── */ --ok: #4CB183; /* Amber: "aging, look when convenient" — between ok and bad. Used by the as-of banner past ~26h. Red stays reserved for act-now. */ --warn: #D2A03F; --bad: #DF6F62; --status-idle: #6E747C; --status-active: #5CA6A1; --status-blocked: #D2A03F; /* The base shell is neutral; entering a workspace floods --acc with that system's color. Every accented surface reads from this one variable. */ --acc: #5CA6A1; /* ── the nexus viewport ─────────────────────────────────────── Marco 2026-07-31: "no i dont want dark center in both themes" — so the web goes light with the rest of the shell. It does NOT use additive blending (no globalCompositeOperation), so this works; what does have to flip is inside nexus.js: the node cores brighten by +70 against black and must DARKEN by the same amount against white, and the link alphas (0.045 / 0.085) are tuned for a black ground and vanish on a light one. */ --nexus-1: #161A1D; --nexus-2: #101315; --nexus-hud: #6B948F; --nexus-grid: rgba(92, 166, 161, .16); --nexus-edge: transparent; --nexus-fade: #101315; /* the colour trails fade toward */ /* ── surfaces that are NOT in the grey ramp ─────────────────── The callout background was rgba(11,14,17,.9) inline in styles.css. It LOOKS like a scrim, which is why it survived the first sweep — but it is the card's surface, and it rendered the workspace cards as dark boxes with unreadable titles on a light page. */ --callout-bg: rgba(18, 20, 22, .9); --warn-edge: #2E2818; --ok-wash: #1C2E26; --hud-live: #7CC2BC; --sticky-bg: rgba(20, 24, 30, .9); /* Button surfaces. Missed on the first sweep because I read the grep output through `head` and mapped only what I could see - the approve button then rendered dark green on the light theme. */ --ok-surface: #18261F; --bright-hover: #FFFFFF; /* ── type ─────────────────────────────────────────────────── */ --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ═══════════════════════════════════════════════════════════════ LIGHT Surfaces invert; the text ramp is re-authored rather than flipped. Accents are DARKENED, not reused: #8FE3C0 reads beautifully on near-black and disappears on white. Every value here was contrast-checked against #F6F7F9, #FFFFFF and #ECEFF3. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --bg: #EFEDE8; --panel: #FAF9F6; --panel-2: #F6F4F0; --panel-deep: #E6E3DB; --line: #D8D4CB; --line-2: #C4BFB3; --line-3: #B5AFA2; --text: #15181A; --text-2: #34393E; --muted: #4E5359; --dim: #5C6268; /* 5.33:1 on the worst light surface */ --faint: #60666D; /* 5.02:1 — still clears 4.5 */ --bright: #0F1214; /* "brightest" means strongest, so it flips to near-black */ --car: #0F7A57; --car-text: #0F7A57; --car-dim: #E6F4EE; --mg: #0D7686; --mg-text: #0D7686; --mg-dim: #E3F2F5; --cam: #3A5CBF; --cam-text: #3A5CBF; --cam-dim: #E8EDFA; --sc: #6B4CC0; --sc-text: #6B4CC0; --sc-dim: #EFEAFA; --personal: #C0392B; --personal-text: #C0392B; --personal-dim: #FBEAEA; --notes: #3A3733; --notes-text: #4A4640; --notes-dim: #F2F1EE; --ok: #1B6B45; --warn: #8A6212; --bad: #A2362C; --status-idle: #5C6268; --status-active: #1F5559; --status-blocked: #8A6212; --acc: #1F5559; /* The nexus goes light too. The grid and HUD are re-picked rather than reused: a .16-alpha cyan grid is invisible on white, and #5E8A96 HUD text fails contrast on it. */ --nexus-1: #FAF9F6; --nexus-2: #E9E5DC; --nexus-hud: #33625E; --nexus-grid: rgba(31, 85, 89, .14); --nexus-edge: #C4BFB3; --nexus-fade: #FAF9F6; --callout-bg: rgba(250, 249, 246, .93); --warn-edge: #D9C58C; --ok-wash: #DFEDE4; --hud-live: #1F5559; --sticky-bg: rgba(247, 243, 228, .95); /* a light theme sticky is a sticky */ --ok-surface: #EEF5EF; /* base tint; --ok-wash is the stronger hover */ --bright-hover: #000000; /* --bright is near-black on light, so "brighter" inverts */ /* Shadows read as depth on light and as smudge on dark, so the scrims that were tuned for a black shell need lifting here. */ color-scheme: light; } :root { color-scheme: dark; }