/* ============================================================================ metatrix-theme.css — HAND-AUTHORED. Do not generate this file. Replaces the abandoned scripts/gen-light-theme.mjs, which regex-parsed CSS and re-emitted 134 mapped rules. That produced six defects from one root cause — see docs/light-theme-method-2026-07-25.md. This themes at the TOKEN layer instead. metatrix-atlas.css and metatrix-console.css are ~80% var()-driven (121 and 111 var() usages), so overriding their 32 tokens themes every one of those usages at once, with no parsing and nothing to corrupt. Every value below is hand-picked and contrast-checked against the light canvas (#f6f7fb) for WCAG 1.4.3 AA. GATE: light values apply only when a page carries data-lightready, so a page whose CSS is not yet converted stays fully dark rather than half-light. ========================================================================== */ /* Let the UA paint the correct canvas, scrollbars and form controls before our CSS parses. Gated too: an unconverted page must keep dark native widgets. */ :root { color-scheme: dark; } html[data-lightready][data-theme="light"] { color-scheme: light; } /* ── Accessibility preferences — deliberately UNGATED. These are not theming; they must take effect on every page immediately, converted or not. ──────── */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :root[data-font="dyslexic"] body, :root[data-font="dyslexic"] #mtx-side, :root[data-font="dyslexic"] #mtx-menu, :root[data-font="dyslexic"] .mtx-scrim { font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important; letter-spacing: .02em; word-spacing: .12em; } /* ── Light tokens ────────────────────────────────────────────────────────── Contrast ratios in comments are measured against --a-bg #f6f7fb. Anything carrying body text must clear 4.5:1; large/display text 3:1. */ html[data-lightready][data-theme="light"] { /* atlas (metatrix-atlas.css — 121 var() usages) */ --a-bg: #f6f7fb; --a-bg2: #eef0f6; --a-card: rgba(0, 0, 0, .035); --a-card2: rgba(0, 0, 0, .06); --a-ink: #12121a; /* 17.4:1 body text */ --a-dim: #4d5260; /* 7.3:1 secondary text */ --a-faint: #5c6070; /* 5.8:1 tertiary/meta text */ --a-line: rgba(0, 0, 0, .14); --a-line2: rgba(0, 0, 0, .26); --a-phos: #0f7a3a; /* 5.1:1 phosphor green */ --a-glow: 0 0 8px rgba(15, 122, 58, .30); --a-ice: #0a6fb0; /* 5.0:1 */ --a-amber: #8a5a00; /* 5.5:1 */ --a-blood: #c02626; /* 5.5:1 */ --a-violet: #6d34d6; /* 6.3:1 */ --a-orange: #b4500b; /* 4.8:1 */ /* console (metatrix-console.css — 111 var() usages) */ --mtx-ink: #12121a; --mtx-dim: #4d5260; --mtx-faint: #5c6070; --mtx-line: rgba(0, 0, 0, .14); --mtx-line2: rgba(0, 0, 0, .24); --mtx-glass: rgba(255, 255, 255, .72); --mtx-card: rgba(0, 0, 0, .04); --mtx-phos: #0f7a3a; --mtx-phos-glow: 0 0 8px rgba(15, 122, 58, .30); --mtx-amber: #8a5a00; --mtx-blood: #c02626; --mtx-ice: #0a6fb0; --mtx-violet: #6d34d6; } /* ── The few atlas rules that hardcode a colour instead of using a token. Listed explicitly rather than machine-derived; each one is a known case. */ html[data-lightready][data-theme="light"] body { background: radial-gradient(1200px 700px at 50% -10%, #eef1f7 0%, var(--a-bg) 60%); } /* sticky top bar — a translucent SURFACE, not a modal scrim, so it flips */ html[data-lightready][data-theme="light"] .a-top { background: rgba(255, 255, 255, .72); border-bottom: 1px solid var(--a-line); } /* gradient display heading: background, clip and transparent colour only work as a set — dropping any one renders a solid filled rectangle */ html[data-lightready][data-theme="light"] .a-h1 { background: linear-gradient(180deg, #0a6fb0, #0d5f8a 40%, #a01818 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Prose emphasis inside .out hardcodes #fff (atlas.css:114) and a white wash (:117). On a light canvas that is white-on-white — 1.07:1, literally invisible. Caught by light-verify, not by eye. */ html[data-lightready][data-theme="light"] .out strong { color: var(--a-ink); } html[data-lightready][data-theme="light"] .out code { background: rgba(0, 0, 0, .07); color: var(--a-ink); } /* ── Sidebar chrome (metatrix-sidebar.css) ──────────────────────────────────── Hand-authored light overrides rather than tokenising the source. The sidebar has 133 hardcoded literals against only 2 tokens, so tokenising would mean editing the DARK stylesheet — risking a regression in the thing that already works. These rules are strictly ADDITIVE and gated, so dark mode cannot be affected at all. Every colour below is verified >= 4.5:1 on white. Until these exist, no sidebar-bearing page may carry data-lightready. */ html[data-lightready][data-theme="light"] #mtx-side { background-color: #ffffff; border-right: 1px solid #e3e5ec; color: #1b1b24; box-shadow: 0 0 40px rgba(0, 0, 0, .10); } html[data-lightready][data-theme="light"] #mtx-side .mtx-head, html[data-lightready][data-theme="light"] #mtx-side .mtx-acct { background: #ffffff; } html[data-lightready][data-theme="light"] #mtx-side::-webkit-scrollbar-thumb, html[data-lightready][data-theme="light"] #mtx-side .mtx-recents::-webkit-scrollbar-thumb { background: #d8dae2; } html[data-lightready][data-theme="light"] #mtx-side .mtx-wordmark { color: #2e1668; } /* 14.7:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-iconbtn { color: #45495a; } /* 8.9:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-iconbtn:hover { background: rgba(109, 52, 214, .12); color: #4c2f9e; } html[data-lightready][data-theme="light"] #mtx-side .mtx-item { color: #4c2f9e; } /* 9.5:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-item:hover { background: rgba(109, 52, 214, .10); color: #2e1668; } html[data-lightready][data-theme="light"] #mtx-side .mtx-item .mtx-ic { color: #6d34d6; } /* 6.8:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-item:hover .mtx-ic { color: #4c2f9e; } html[data-lightready][data-theme="light"] #mtx-side .mtx-item .mtx-trail, html[data-lightready][data-theme="light"] #mtx-side .mtx-seclabel .mtx-trail { color: #6b6f7e; } /* 5.0:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-seclabel { color: #5c6070; } /* 6.3:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-recent { color: #3d4150; } /* 10.1:1 */ html[data-lightready][data-theme="light"] #mtx-side .mtx-recent:hover { background: rgba(109, 52, 214, .10); color: #2e1668; } html[data-lightready][data-theme="light"] #mtx-side .mtx-recent.muted { color: #6b6f7e; } html[data-lightready][data-theme="light"] #mtx-side .mtx-signin-cta { border: 1px solid rgba(109, 52, 214, .40); background: rgba(109, 52, 214, .08); color: #4c2f9e; } html[data-lightready][data-theme="light"] #mtx-side .mtx-signin-cta:hover { background: rgba(109, 52, 214, .14); } html[data-lightready][data-theme="light"] #mtx-side #mtx-sov { border: 1px solid rgba(0, 0, 0, .10); background: rgba(0, 0, 0, .03); color: #5c6070; } html[data-lightready][data-theme="light"] #mtx-side #mtx-sov .sov-dot { background: #8a8e9a; } html[data-lightready][data-theme="light"] #mtx-side #mtx-sov.sov-live { color: #0f5c38; border-color: rgba(15, 122, 78, .28); background: rgba(15, 122, 78, .07); } html[data-lightready][data-theme="light"] #mtx-side #mtx-sov.sov-live .sov-dot { background: #0d7a4e; box-shadow: 0 0 8px rgba(13, 122, 78, .40); } html[data-lightready][data-theme="light"] #mtx-side .mtx-acct:hover { background: rgba(0, 0, 0, .05); } /* the avatar orb must stay DARK — a white orb disappears on a white rail */ html[data-lightready][data-theme="light"] #mtx-side .mtx-avatar { background: radial-gradient(circle at 50% 40%, #4c4f63 0%, #2a2d3c 45%, #16182233 100%); box-shadow: 0 0 10px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .12); color: #ffffff; } html[data-lightready][data-theme="light"] #mtx-side .mtx-acct-name { color: #1b1b24; } html[data-lightready][data-theme="light"] #mtx-side .mtx-acct-plan, html[data-lightready][data-theme="light"] #mtx-side .mtx-acct-caret { color: #5c6070; } html[data-lightready][data-theme="light"] #mtx-menu { background: #ffffff; border: 1px solid #e3e5ec; color: #1b1b24; box-shadow: 0 18px 60px rgba(0, 0, 0, .20); } html[data-lightready][data-theme="light"] #mtx-menu .mtx-menu-email { color: #5c6070; border-bottom: 1px solid rgba(0, 0, 0, .10); } html[data-lightready][data-theme="light"] #mtx-menu .mtx-menu-item { color: #23232e; } html[data-lightready][data-theme="light"] #mtx-menu .mtx-menu-item:hover { background: rgba(0, 0, 0, .06); } html[data-lightready][data-theme="light"] #mtx-menu .mtx-menu-sep { background: rgba(0, 0, 0, .10); } /* ── Dual-role accent tokens: the "on-colour" fix ──────────────────────────── 9 tokens are used as BOTH text and background (--a-phos 5 text / 6 bg, etc). In dark mode that works by accident because the accent is bright: legible as text on dark AND usable behind dark text. A dark light-mode value fixes the text role and breaks the surface role (dark-on-dark-green, 3.47:1 — /forge). MDN: a single value cannot serve both roles across themes. Material 3 solves this with paired roles (primary / on-primary). Here the pairing is expressed at the point of use: any accent SURFACE that carries text gets an explicit light on-colour. Purely additive and gated, so the dark stylesheets are untouched and dark mode cannot regress. Decorative uses (dots, spinners, borders) need no on-colour — no text sits on them — so they keep the themed token value. */ html[data-lightready][data-theme="light"] .btn, html[data-lightready][data-theme="light"] .a-badge.live, html[data-lightready][data-theme="light"] .a-filter[aria-pressed="true"] { background: var(--a-phos); color: #ffffff; /* 5.1:1 on #0f7a3a */ border-color: var(--a-phos); } html[data-lightready][data-theme="light"] .tab[aria-selected="true"] { background: var(--a-ice); color: #ffffff; /* 5.0:1 on #0a6fb0 */ border-color: var(--a-ice); } html[data-lightready][data-theme="light"] #mtx-send, html[data-lightready][data-theme="light"] .mtx-tg[aria-pressed="true"] { background: var(--mtx-phos); color: #ffffff; border-color: var(--mtx-phos); } html[data-lightready][data-theme="light"] .mtx-tg[aria-pressed="true"].amber { background: var(--mtx-amber); color: #ffffff; border-color: var(--mtx-amber); } html[data-lightready][data-theme="light"] .mtx-tg[aria-pressed="true"].ice { background: var(--mtx-ice); color: #ffffff; border-color: var(--mtx-ice); }