/* tokens.css — the single source of truth for colour and type. * * 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: #0B0E11; --panel: #10141A; --panel-2: #12161B; /* The recessed surface behind feeds, modals, and the whiteboard. */ --panel-deep: #0E1216; --line: #1B1F24; --line-2: #212630; --line-3: #262C34; /* ── text ramp ────────────────────────────────────────────── */ --text: #D7DBE0; --text-2: #C6CBD2; --muted: #8B929C; /* 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: #7E8694; --faint: #78808E; --bright: #E8E6E1; /* ── 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: #7FBFA3; /* Amber: "aging, look when convenient" — between ok and bad. Used by the as-of banner past ~26h. Red stays reserved for act-now. */ --warn: #D9A441; --bad: #E08A8A; --status-idle: #6B727C; --status-active: #17B0C4; --status-blocked: #D4A24E; /* The base shell is neutral; entering a workspace floods --acc with that system's color. Every accented surface reads from this one variable. */ --acc: #8FE3C0; /* ── 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: #0E1620; --nexus-2: #0A0D11; --nexus-hud: #5E8A96; --nexus-grid: rgba(94, 196, 212, .16); --nexus-edge: transparent; --nexus-fade: #0A0D11; /* 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(11, 14, 17, .9); --warn-edge: #2E2617; --ok-wash: #1A2E24; --hud-live: #7FDCE8; --sticky-bg: rgba(14, 18, 32, .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: #16241D; --bright-hover: #FFFFFF; /* ── type ─────────────────────────────────────────────────── */ --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ═══════════════════════════════════════════════════════════════ 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: #F6F7F9; --panel: #FFFFFF; --panel-2: #FBFCFD; --panel-deep: #ECEFF3; --line: #E4E8ED; --line-2: #D9DEE5; --line-3: #CCD3DB; --text: #171B21; --text-2: #2A313A; --muted: #565F6C; --dim: #5A6270; /* 5.33:1 on the worst light surface */ --faint: #5E6673; /* 5.02:1 — still clears 4.5 */ --bright: #0B0E11; /* "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: #2E7D5B; --warn: #8A6100; --bad: #B93226; --status-idle: #5A6270; --status-active: #0D7686; --status-blocked: #8A6100; --acc: #0F7A57; /* 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: #FFFFFF; --nexus-2: #EDF1F5; --nexus-hud: #3D6B76; --nexus-grid: rgba(13, 118, 134, .14); --nexus-edge: #D9DEE5; --nexus-fade: #FFFFFF; --callout-bg: rgba(255, 255, 255, .93); --warn-edge: #E3CE8E; --ok-wash: #E3F3EA; --hud-live: #0D7686; --sticky-bg: rgba(255, 252, 232, .95); /* a light theme sticky is a sticky */ --ok-surface: #F2FAF5; /* 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; }