/* PAPER is the chosen theme (decided Aug 2026) and is the default under :root, so it applies even with no data-theme attribute set. Terminal and Studio are kept as documented alternates rather than deleted — they cost nothing, and they are how you evaluate a change to the chrome against something. To try one: set data-theme="terminal" on in index.html. There is no picker in the UI because the choice is made. Only tokens live here; every component in app.css is written against roles, so switching themes touches nothing structural. On chart colors: the series values are NOT free choices. They come from the validated reference palette — categorical slots 1 and 2 (blue, orange), sequential blue, diverging blue↔red on a neutral gray midpoint — and each theme uses the light or dark *step* that matches its own surface. Both sets pass the lightness band, chroma floor, CVD separation, normal-vision floor, and 3:1 contrast checks. Restyle the chrome freely; re-run the validator before touching these. */ /* ============================================================ 1. PAPER Warm off-white, ink, serif headings. Editorial and quiet — built for reading a brief in the morning rather than monitoring a system. The default. */ :root, :root[data-theme="paper"] { --bg: #fbfbfb; --panel: #ffffff; --ink: #111113; --muted: #6a6a70; --faint: #9a9aa2; --line: #e6e6e9; --accent: #2a78d6; --warn: #8a6a1c; --bad: #b23b2e; --good: #1f7a55; --radius: 8px; --shadow: none; --panel-border: 1px solid var(--line); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --display-weight: 600; --display-spacing: -0.015em; --density: 1; --viz-1: #2a78d6; --viz-2: #eb6834; --viz-fill: color-mix(in srgb, #2a78d6 14%, transparent); --viz-grid: color-mix(in srgb, var(--ink) 9%, transparent); --viz-track: #ece9e2; --viz-pos: #2a78d6; --viz-neg: #e34948; --viz-mid: #f0efec; } /* Dark: true neutral grayscale. The previous dark step was warm-brown and read as muddy — ink on paper does not have a colour temperature at night. Everything structural is gray; the accent is the only hue in the chrome, so the one thing carrying colour is the one thing that matters. Chart series keep their validated hues; they are data, not chrome. */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme])), :root[data-theme="paper"]:where(:not([data-mode="light"])) { --bg: #0b0b0c; --panel: #141416; --ink: #eeeef0; --muted: #9a9aa4; --faint: #63636c; --line: #26262b; --accent: #4d92e8; --warn: #c9a227; --bad: #e2685c; --good: #4fb98a; --viz-1: #3987e5; --viz-2: #d95926; --viz-fill: color-mix(in srgb, #3987e5 16%, transparent); --viz-grid: color-mix(in srgb, var(--ink) 10%, transparent); --viz-track: #26262b; --viz-pos: #3987e5; --viz-neg: #e66767; --viz-mid: #38383c; } } /* ============================================================ 2. TERMINAL Dark, mono-forward, dense. Reads as an instrument panel — closest to the CLI this grew out of, and the best fit if you keep it open all day. Dark only, by design. */ :root[data-theme="terminal"] { --bg: #0c0e12; --panel: #12151b; --ink: #d8dee9; --muted: #7d8794; --faint: #565f6b; --line: #1e242e; --accent: #3987e5; --warn: #d9a066; --bad: #e66767; --good: #199e70; --radius: 3px; --shadow: none; --panel-border: 1px solid var(--line); --font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --font-display: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --display-weight: 600; --display-spacing: 0.01em; --density: 0.82; --viz-1: #3987e5; --viz-2: #d95926; --viz-fill: color-mix(in srgb, #3987e5 20%, transparent); --viz-grid: color-mix(in srgb, var(--ink) 10%, transparent); --viz-track: #1e242e; --viz-pos: #3987e5; --viz-neg: #e66767; --viz-mid: #383835; } /* ============================================================ 3. STUDIO Rounded cards, soft elevation, generous spacing. The most conventional of the three and the easiest to hand to someone else — at the cost of taking more room per item. */ :root[data-theme="studio"] { --bg: #f4f6f9; --panel: #ffffff; --ink: #101728; --muted: #5c6880; --faint: #93a0b5; --line: #e3e8f0; --accent: #2a78d6; --warn: #9a5b12; --bad: #c0392b; --good: #1baf7a; --radius: 14px; --shadow: 0 1px 2px rgba(16, 23, 40, .04), 0 6px 20px -8px rgba(16, 23, 40, .10); --panel-border: 1px solid var(--line); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --display-weight: 700; --display-spacing: -0.025em; --density: 1.18; --viz-1: #2a78d6; --viz-2: #eb6834; --viz-fill: color-mix(in srgb, #2a78d6 12%, transparent); --viz-grid: color-mix(in srgb, var(--ink) 8%, transparent); --viz-track: #e9edf4; --viz-pos: #2a78d6; --viz-neg: #e34948; --viz-mid: #f0efec; } @media (prefers-color-scheme: dark) { :root[data-theme="studio"]:where(:not([data-mode="light"])) { --bg: #0d1117; --panel: #161b23; --ink: #e6edf5; --muted: #8b96a8; --faint: #5f6a7d; --line: #232a35; --accent: #3987e5; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .5); --viz-1: #3987e5; --viz-2: #d95926; --viz-fill: color-mix(in srgb, #3987e5 18%, transparent); --viz-grid: color-mix(in srgb, var(--ink) 10%, transparent); --viz-track: #232a35; --viz-pos: #3987e5; --viz-neg: #e66767; --viz-mid: #383835; } }