@dorsk/tsumikit 0.1.0

package/dist/styles/variables.css

@@ -0,0 +1,651 @@
+/*
+ * THEME — single source of truth.
+ *
+ * Swapping the theme = replacing THIS ONE FILE. Every color, space, radius,
+ * font and size used anywhere in the app is a `var(--…)` defined here. No
+ * component hard-codes a color or pixel value.
+ *
+ * Default is dark; `[data-theme="…"]` blocks at the bottom flip palette tokens
+ * only (everything downstream is unchanged).
+ */
+
+:root {
+  /* Tell the UA our default surface is dark so native widgets (form controls,
+     scrollbars, the caret, spellcheck underlines) render their dark variant.
+     Light themes flip this in their own block. */
+  color-scheme: dark;
+
+  /* ---- Palette (raw) ---- */
+  --c-bg: #0f1115;
+  --c-bg-elev: #171a21;
+  --c-bg-elev-2: #1f232c;
+  --c-surface: #21262f;
+  --c-border: #2c323d;
+  --c-border-strong: #3a414e;
+  --c-text: #e6e9ef;
+  --c-text-muted: #9aa3b2;
+  --c-text-faint: #6b7384;
+
+  --c-accent: #5ad6a0;
+  --c-accent-ink: #04130c;
+  --c-accent-dim: #2a6e54;
+
+  --c-blue: #5aa9ff;
+  --c-amber: #f0b454;
+  --c-red: #f0716b;
+  --c-green: #5ad6a0;
+  --c-violet: #b48ef0;
+  --c-gold: #f0b454;
+  --c-teal: #4fd6cf;
+
+  /* ---- Role colors (CCT-161) — uniform message theming, all derived from
+	   palette tokens so each theme adapts. Used for role badges + bubble tints. */
+  --role-user: var(--c-green);
+  --role-assistant: var(--c-blue);
+  --role-system: var(--c-violet);
+  --role-tool: var(--c-gold);
+  --role-mcp: var(--c-teal);
+  /* compact/clear boundary — neutral "paper white" so it reads as structure */
+  --role-boundary: var(--c-text-muted);
+
+  /* ---- Markdown / syntax-highlight tokens (CCT-161) — themeable ---- */
+  --md-text: var(--c-text-muted); /* base prose: grayish */
+  --md-strong: var(--c-text); /* bold: bright white-ish */
+  --md-code: var(--c-blue); /* inline code: bold blue */
+  --md-code-bg: color-mix(in srgb, var(--c-blue) 14%, var(--c-bg));
+  --md-heading: var(--c-text);
+  --syn-keyword: var(--c-violet);
+  --syn-string: var(--c-green);
+  --syn-number: var(--c-amber);
+  --syn-comment: var(--c-text-faint);
+  --syn-function: var(--c-blue);
+  --syn-punct: var(--c-text-muted);
+
+  /* ---- Semantic ---- */
+  --bg: var(--c-bg);
+  --bg-elevated: var(--c-bg-elev);
+  --bg-elevated-2: var(--c-bg-elev-2);
+  --surface: var(--c-surface);
+  --border: var(--c-border);
+  --border-strong: var(--c-border-strong);
+
+  --text: var(--c-text);
+  --text-muted: var(--c-text-muted);
+  --text-faint: var(--c-text-faint);
+  --text-on-accent: var(--c-accent-ink);
+
+  --accent: var(--c-accent);
+  --accent-dim: var(--c-accent-dim);
+  --link: var(--c-blue);
+
+  --ok: var(--c-green);
+  --warn: var(--c-amber);
+  --danger: var(--c-red);
+  --info: var(--c-blue);
+
+  /* status dots */
+  --dot-active: var(--c-green);
+  --dot-stale: var(--c-amber);
+  --dot-dead: var(--c-text-faint);
+  --dot-hibernated: var(--c-red);
+
+  /* attention highlight (needs-input row) */
+  --attention-bg: color-mix(in srgb, var(--c-amber) 12%, transparent);
+  --attention-bar: var(--c-amber);
+
+  /* machine-badge tinting (CCT-271, fixed CCT-272) — the hue is per-machine
+	   (name hash or operator override, --mh, set on the badge element), but the
+	   saturation/lightness come from the theme as `<sat%> <light%>` PAIRS. The
+	   badge composes `hsl(var(--mh) var(--mach-*-sl))` itself, so both vars
+	   resolve on the element where --mh lives. (Composing the full hsl() here at
+	   :root would break: --mh is undefined at :root, so the token is invalid and
+	   inherits down invalid → white badges.) Dark themes default here; light
+	   themes flip to dark-text-on-pale-tint in their [data-theme] block. */
+  --mach-bg-sl: 45% 22%;
+  --mach-fg-sl: 70% 80%;
+  --mach-border-sl: 45% 35%;
+
+  /* ---- Typography ---- */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas,
+    monospace;
+
+  /* Text-scale factor (CCT-305). The UI font control multiplies ONLY the
+	   font-size tokens by this — not the root font-size — so bumping the size up
+	   enlarges text (chat, session text, badges, labels) meaningfully while the
+	   chrome (button heights, padding, spacing, the px-pinned header) stays put.
+	   Previously the control scaled the document root font-size, which grew every
+	   rem-based chrome dimension in lockstep so text "barely grew" relative to the
+	   ballooning UI. Default 1 = no scaling. */
+  --fs-scale: 1;
+
+  --fs-xs: calc(0.75rem * var(--fs-scale)); /* 12 */
+  --fs-sm: calc(0.8125rem * var(--fs-scale)); /* 13 */
+  --fs-base: calc(0.9375rem * var(--fs-scale)); /* 15 */
+  --fs-md: calc(1rem * var(--fs-scale)); /* 16 */
+  --fs-lg: calc(1.125rem * var(--fs-scale)); /* 18 */
+  --fs-xl: calc(1.375rem * var(--fs-scale)); /* 22 */
+  --fs-2xl: calc(1.75rem * var(--fs-scale)); /* 28 */
+
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+
+  --lh-tight: 1.25;
+  --lh-normal: 1.5;
+
+  /* ---- Spacing (4px base) ---- */
+  --sp-0: 0;
+  --sp-1: 0.25rem;
+  --sp-2: 0.5rem;
+  --sp-3: 0.75rem;
+  --sp-4: 1rem;
+  --sp-5: 1.25rem;
+  --sp-6: 1.5rem;
+  --sp-8: 2rem;
+  --sp-10: 2.5rem;
+  --sp-12: 3rem;
+
+  /* ---- Radii ---- */
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  --r-pill: 999px;
+
+  /* ---- Elevation ---- */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
+
+  /* ---- Controls (CCT-250 item 1) — shared height for icon buttons + inputs
+	   so toolbars/composers line up. `.btn-control` (app.css) consumes it. */
+  --control-height: 2.75rem;
+
+  /* ---- Layout ---- */
+  /* Fixed (px, not rem): the header is chrome that must NOT scale with the
+	   UI font slider it hosts (CCT-264) — a rem header-h would grow under the
+	   slider and reflow it mid-drag. Pinning here keeps the bar height, the
+	   content clearance, and the sticky offsets that key off it all consistent
+	   with the fixed toolbar. */
+  --header-h: 52px;
+  --nav-h: 3.5rem;
+  --content-max: 56rem;
+  --z-header: 50;
+  --z-nav: 50;
+  --z-drawer: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+
+  /* safe-area insets (phones with notch / gesture bar / bottom address bar) */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+
+  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --c-bg: #f6f7f9;
+  --c-bg-elev: #ffffff;
+  --c-bg-elev-2: #eef0f3;
+  --c-surface: #ffffff;
+  --c-border: #d9dde3;
+  --c-border-strong: #c2c8d1;
+  --c-text: #1a1d23;
+  --c-text-muted: #5b6472;
+  --c-text-faint: #8a93a3;
+  --c-accent: #1f9d6b;
+  --c-accent-ink: #ffffff;
+  --c-accent-dim: #9bd9c2;
+  --c-blue: #2f7ddb;
+  --c-amber: #c98a1d;
+  --c-red: #d6463f;
+  --c-green: #1f9d6b;
+  --c-violet: #7c3aed;
+  --c-gold: #c98a1d;
+  --c-teal: #0d9488;
+  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
+  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
+  --shadow-md: 0 6px 20px rgba(20, 24, 31, 0.12);
+  --shadow-lg: 0 12px 40px rgba(20, 24, 31, 0.18);
+  /* light bg → pale tint + dark ink so badges stay legible */
+  --mach-bg-sl: 60% 90%;
+  --mach-fg-sl: 55% 30%;
+  --mach-border-sl: 45% 72%;
+}
+
+/* ---- Sepia / "Claude paper" theme (CCT-161 item 3) — warm cream paper,
+   brown ink, solarized-ish accents. Same variable contract as light/dark. */
+[data-theme="sepia"] {
+  color-scheme: light;
+  --c-bg: #f4ecd8;
+  --c-bg-elev: #faf3e3;
+  --c-bg-elev-2: #ece1c6;
+  --c-surface: #faf3e3;
+  --c-border: #ddccab;
+  --c-border-strong: #c8b48c;
+  --c-text: #3b2f1e;
+  --c-text-muted: #6f5d42;
+  --c-text-faint: #9a8868;
+  --c-accent: #5a8250;
+  --c-accent-ink: #faf3e3;
+  --c-accent-dim: #aec79f;
+  --c-blue: #2c6f9b;
+  --c-amber: #b07a18;
+  --c-red: #b5403a;
+  --c-green: #5a8250;
+  --c-violet: #8a5fa8;
+  --c-gold: #a87d1f;
+  --c-teal: #2a8f86;
+  --md-code-bg: color-mix(in srgb, var(--c-blue) 14%, var(--c-bg));
+  --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.1);
+  --shadow-md: 0 6px 20px rgba(80, 60, 30, 0.14);
+  --shadow-lg: 0 12px 40px rgba(80, 60, 30, 0.2);
+  /* warm, slightly desaturated tint to sit with the cream paper */
+  --mach-bg-sl: 40% 84%;
+  --mach-fg-sl: 45% 32%;
+  --mach-border-sl: 35% 66%;
+}
+
+/* ---- Catppuccin Mocha - official Mocha base/surface/text/accent colors. */
+[data-theme="mocha"] {
+  --c-bg: #1e1e2e;
+  --c-bg-elev: #242438;
+  --c-bg-elev-2: #313244;
+  --c-surface: #313244;
+  --c-border: #45475a;
+  --c-border-strong: #585b70;
+  --c-text: #cdd6f4;
+  --c-text-muted: #bac2de;
+  --c-text-faint: #7f849c;
+  --c-accent: #cba6f7;
+  --c-accent-ink: #1e1e2e;
+  --c-accent-dim: #6c7086;
+  --c-blue: #89b4fa;
+  --c-amber: #f9e2af;
+  --c-red: #f38ba8;
+  --c-green: #a6e3a1;
+  --c-violet: #cba6f7;
+  --c-gold: #f9e2af;
+  --c-teal: #94e2d5;
+  --shadow-sm: 0 1px 2px rgba(17, 17, 27, 0.36);
+  --shadow-md: 0 6px 20px rgba(17, 17, 27, 0.42);
+  --shadow-lg: 0 12px 40px rgba(17, 17, 27, 0.5);
+  /* soft pastel tint to match Catppuccin's low-saturation palette */
+  --mach-bg-sl: 35% 26%;
+  --mach-fg-sl: 55% 82%;
+  --mach-border-sl: 35% 40%;
+}
+
+/* ---- Dracula - official palette colors with UI contrast assignments. */
+[data-theme="dracula"] {
+  --c-bg: #282a36;
+  --c-bg-elev: #343746;
+  --c-bg-elev-2: #44475a;
+  --c-surface: #343746;
+  --c-border: #44475a;
+  --c-border-strong: #6272a4;
+  --c-text: #f8f8f2;
+  --c-text-muted: #c7c9d1;
+  --c-text-faint: #6272a4;
+  --c-accent: #bd93f9;
+  --c-accent-ink: #1d1726;
+  --c-accent-dim: #6f558f;
+  --c-blue: #8be9fd;
+  --c-amber: #ffb86c;
+  --c-red: #ff5555;
+  --c-green: #50fa7b;
+  --c-violet: #bd93f9;
+  --c-gold: #f1fa8c;
+  --c-teal: #8be9fd;
+  --shadow-sm: 0 1px 2px rgba(20, 21, 27, 0.36);
+  --shadow-md: 0 6px 20px rgba(20, 21, 27, 0.44);
+  --shadow-lg: 0 12px 40px rgba(20, 21, 27, 0.52);
+  /* vivid, high-chroma to echo Dracula's neon accents */
+  --mach-bg-sl: 55% 24%;
+  --mach-fg-sl: 85% 82%;
+  --mach-border-sl: 55% 40%;
+}
+
+/* ---- Nord - Polar Night, Snow Storm, Frost, and Aurora palette tokens. */
+[data-theme="nord"] {
+  --c-bg: #2e3440;
+  --c-bg-elev: #3b4252;
+  --c-bg-elev-2: #434c5e;
+  --c-surface: #3b4252;
+  --c-border: #4c566a;
+  --c-border-strong: #5e81ac;
+  --c-text: #eceff4;
+  --c-text-muted: #d8dee9;
+  --c-text-faint: #8fbcbb;
+  --c-accent: #88c0d0;
+  --c-accent-ink: #1f242d;
+  --c-accent-dim: #5e81ac;
+  --c-blue: #81a1c1;
+  --c-amber: #ebcb8b;
+  --c-red: #bf616a;
+  --c-green: #a3be8c;
+  --c-violet: #b48ead;
+  --c-gold: #ebcb8b;
+  --c-teal: #8fbcbb;
+  --shadow-sm: 0 1px 2px rgba(20, 25, 34, 0.34);
+  --shadow-md: 0 6px 20px rgba(20, 25, 34, 0.42);
+  --shadow-lg: 0 12px 40px rgba(20, 25, 34, 0.5);
+  /* muted, frost-cool tint in keeping with Nord's restrained palette */
+  --mach-bg-sl: 28% 30%;
+  --mach-fg-sl: 40% 84%;
+  --mach-border-sl: 28% 44%;
+}
+
+/* ---- Tokyo Night — deep blue/indigo base with purple + cyan accents. */
+[data-theme="tokyonight"] {
+  --c-bg: #1a1b26;
+  --c-bg-elev: #1f2233;
+  --c-bg-elev-2: #24283b;
+  --c-surface: #1f2233;
+  --c-border: #2f344d;
+  --c-border-strong: #414868;
+  --c-text: #c0caf5;
+  --c-text-muted: #9aa5ce;
+  --c-text-faint: #565f89;
+  --c-accent: #7aa2f7;
+  --c-accent-ink: #11121d;
+  --c-accent-dim: #3d59a1;
+  --c-blue: #7aa2f7;
+  --c-amber: #e0af68;
+  --c-red: #f7768e;
+  --c-green: #9ece6a;
+  --c-violet: #bb9af7;
+  --c-gold: #e0af68;
+  --c-teal: #7dcfff;
+  --shadow-sm: 0 1px 2px rgba(13, 14, 22, 0.4);
+  --shadow-md: 0 6px 20px rgba(13, 14, 22, 0.48);
+  --shadow-lg: 0 12px 40px rgba(13, 14, 22, 0.56);
+  --mach-bg-sl: 48% 23%;
+  --mach-fg-sl: 75% 82%;
+  --mach-border-sl: 48% 38%;
+}
+
+/* ---- Gruvbox (dark, medium) — warm retro browns with orange/green accents. */
+[data-theme="gruvbox"] {
+  --c-bg: #282828;
+  --c-bg-elev: #32302f;
+  --c-bg-elev-2: #3c3836;
+  --c-surface: #32302f;
+  --c-border: #504945;
+  --c-border-strong: #665c54;
+  --c-text: #ebdbb2;
+  --c-text-muted: #d5c4a1;
+  --c-text-faint: #a89984;
+  --c-accent: #fe8019;
+  --c-accent-ink: #1d1a14;
+  --c-accent-dim: #af3a03;
+  --c-blue: #83a598;
+  --c-amber: #fabd2f;
+  --c-red: #fb4934;
+  --c-green: #b8bb26;
+  --c-violet: #d3869b;
+  --c-gold: #fabd2f;
+  --c-teal: #8ec07c;
+  --shadow-sm: 0 1px 2px rgba(20, 19, 17, 0.4);
+  --shadow-md: 0 6px 20px rgba(20, 19, 17, 0.48);
+  --shadow-lg: 0 12px 40px rgba(20, 19, 17, 0.56);
+  --mach-bg-sl: 42% 25%;
+  --mach-fg-sl: 60% 80%;
+  --mach-border-sl: 42% 40%;
+}
+
+/* ---- Solarized Dark — Ethan Schoonover's base03 with the 16-color accents. */
+[data-theme="solarized"] {
+  --c-bg: #002b36;
+  --c-bg-elev: #073642;
+  --c-bg-elev-2: #0a4350;
+  --c-surface: #073642;
+  --c-border: #0f4d5c;
+  --c-border-strong: #586e75;
+  --c-text: #eee8d5;
+  --c-text-muted: #93a1a1;
+  --c-text-faint: #657b83;
+  --c-accent: #2aa198;
+  --c-accent-ink: #002b36;
+  --c-accent-dim: #1a6b66;
+  --c-blue: #268bd2;
+  --c-amber: #b58900;
+  --c-red: #dc322f;
+  --c-green: #859900;
+  --c-violet: #6c71c4;
+  --c-gold: #b58900;
+  --c-teal: #2aa198;
+  --shadow-sm: 0 1px 2px rgba(0, 17, 22, 0.42);
+  --shadow-md: 0 6px 20px rgba(0, 17, 22, 0.5);
+  --shadow-lg: 0 12px 40px rgba(0, 17, 22, 0.58);
+  --mach-bg-sl: 50% 20%;
+  --mach-fg-sl: 55% 78%;
+  --mach-border-sl: 50% 34%;
+}
+
+/* ---- Rosé Pine — soho-vibe with muted rose, iris (purple) and pine. */
+[data-theme="rosepine"] {
+  --c-bg: #191724;
+  --c-bg-elev: #1f1d2e;
+  --c-bg-elev-2: #26233a;
+  --c-surface: #1f1d2e;
+  --c-border: #2a2839;
+  --c-border-strong: #403d52;
+  --c-text: #e0def4;
+  --c-text-muted: #908caa;
+  --c-text-faint: #6e6a86;
+  --c-accent: #c4a7e7;
+  --c-accent-ink: #14121d;
+  --c-accent-dim: #6c5d8a;
+  --c-blue: #9ccfd8;
+  --c-amber: #f6c177;
+  --c-red: #eb6f92;
+  --c-green: #3e8fb0;
+  --c-violet: #c4a7e7;
+  --c-gold: #f6c177;
+  --c-teal: #9ccfd8;
+  --shadow-sm: 0 1px 2px rgba(13, 12, 20, 0.42);
+  --shadow-md: 0 6px 20px rgba(13, 12, 20, 0.5);
+  --shadow-lg: 0 12px 40px rgba(13, 12, 20, 0.58);
+  --mach-bg-sl: 38% 26%;
+  --mach-fg-sl: 58% 84%;
+  --mach-border-sl: 38% 42%;
+}
+
+/* ---- One Dark — Atom's classic palette, blue-leaning with warm accents. */
+[data-theme="onedark"] {
+  --c-bg: #282c34;
+  --c-bg-elev: #2f343f;
+  --c-bg-elev-2: #353b45;
+  --c-surface: #2f343f;
+  --c-border: #3e4451;
+  --c-border-strong: #4b5263;
+  --c-text: #abb2bf;
+  --c-text-muted: #9da5b4;
+  --c-text-faint: #5c6370;
+  --c-accent: #61afef;
+  --c-accent-ink: #11151c;
+  --c-accent-dim: #2c6da3;
+  --c-blue: #61afef;
+  --c-amber: #e5c07b;
+  --c-red: #e06c75;
+  --c-green: #98c379;
+  --c-violet: #c678dd;
+  --c-gold: #e5c07b;
+  --c-teal: #56b6c2;
+  --shadow-sm: 0 1px 2px rgba(17, 19, 25, 0.4);
+  --shadow-md: 0 6px 20px rgba(17, 19, 25, 0.48);
+  --shadow-lg: 0 12px 40px rgba(17, 19, 25, 0.56);
+  --mach-bg-sl: 40% 26%;
+  --mach-fg-sl: 65% 80%;
+  --mach-border-sl: 40% 40%;
+}
+
+/* ---- Everforest (dark, medium) — soft green forest base, low-contrast. */
+[data-theme="everforest"] {
+  --c-bg: #2d353b;
+  --c-bg-elev: #343f44;
+  --c-bg-elev-2: #3d484d;
+  --c-surface: #343f44;
+  --c-border: #475258;
+  --c-border-strong: #4f585e;
+  --c-text: #d3c6aa;
+  --c-text-muted: #a7b0a3;
+  --c-text-faint: #859289;
+  --c-accent: #a7c080;
+  --c-accent-ink: #1c2226;
+  --c-accent-dim: #5c6f49;
+  --c-blue: #7fbbb3;
+  --c-amber: #dbbc7f;
+  --c-red: #e67e80;
+  --c-green: #a7c080;
+  --c-violet: #d699b6;
+  --c-gold: #dbbc7f;
+  --c-teal: #83c092;
+  --shadow-sm: 0 1px 2px rgba(22, 27, 30, 0.4);
+  --shadow-md: 0 6px 20px rgba(22, 27, 30, 0.48);
+  --shadow-lg: 0 12px 40px rgba(22, 27, 30, 0.56);
+  --mach-bg-sl: 30% 28%;
+  --mach-fg-sl: 45% 80%;
+  --mach-border-sl: 30% 42%;
+}
+
+/* ---- Monokai — the vivid classic: lime, magenta, orange and cyan on slate. */
+[data-theme="monokai"] {
+  --c-bg: #272822;
+  --c-bg-elev: #2f302a;
+  --c-bg-elev-2: #383830;
+  --c-surface: #2f302a;
+  --c-border: #49483e;
+  --c-border-strong: #5b5a4e;
+  --c-text: #f8f8f2;
+  --c-text-muted: #cfcfc2;
+  --c-text-faint: #75715e;
+  --c-accent: #a6e22e;
+  --c-accent-ink: #14160f;
+  --c-accent-dim: #5f7d18;
+  --c-blue: #66d9ef;
+  --c-amber: #fd971f;
+  --c-red: #f92672;
+  --c-green: #a6e22e;
+  --c-violet: #ae81ff;
+  --c-gold: #e6db74;
+  --c-teal: #66d9ef;
+  --shadow-sm: 0 1px 2px rgba(18, 19, 14, 0.42);
+  --shadow-md: 0 6px 20px rgba(18, 19, 14, 0.5);
+  --shadow-lg: 0 12px 40px rgba(18, 19, 14, 0.58);
+  --mach-bg-sl: 55% 22%;
+  --mach-fg-sl: 80% 80%;
+  --mach-border-sl: 55% 38%;
+}
+
+/* ---- AMOLED (CCT-309) — pure-black background, high-contrast white text for
+   maximum contrast / OLED power saving. Elevated surfaces step up in tiny
+   increments off true black (so cards/popovers/composer/code blocks stay
+   distinguishable without diluting the black page), borders are bright enough
+   to read as crisp dividers, and accents are vivid for legibility on black. */
+[data-theme="amoled"] {
+  --c-bg: #000000;
+  --c-bg-elev: #0a0a0a;
+  --c-bg-elev-2: #141414;
+  --c-surface: #0d0d0d;
+  --c-border: #787878;
+  --c-border-strong: #c8c8c8;
+  --c-text: #ffffff;
+  --c-text-muted: #c8c8c8;
+  --c-text-faint: #8e8e8e;
+  --c-accent: #34e89e;
+  --c-accent-ink: #000000;
+  --c-accent-dim: #1f8f62;
+  --c-blue: #4db5ff;
+  --c-amber: #ffc24b;
+  --c-red: #ff6b6b;
+  --c-green: #34e89e;
+  --c-violet: #c79bff;
+  --c-gold: #ffc24b;
+  --c-teal: #45e0d8;
+  --md-code-bg: color-mix(in srgb, var(--c-blue) 18%, #000000);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
+  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.85);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.9);
+  /* high-chroma tint to read sharply against pure black */
+  --mach-bg-sl: 60% 18%;
+  --mach-fg-sl: 90% 84%;
+  --mach-border-sl: 60% 42%;
+}
+
+/* ---- High Contrast Light (CCT-309) — pure-white background, near-black text.
+   The light-mode counterpart to AMOLED: maximum contrast for bright
+   environments. Strong borders and dark, saturated accents keep every surface
+   legible on white. */
+[data-theme="highcontrast"] {
+  color-scheme: light;
+  --c-bg: #ffffff;
+  --c-bg-elev: #ffffff;
+  --c-bg-elev-2: #f0f0f0;
+  --c-surface: #ffffff;
+  --c-border: #b0b0b0;
+  --c-border-strong: #707070;
+  --c-text: #000000;
+  --c-text-muted: #2e2e2e;
+  --c-text-faint: #555555;
+  --c-accent: #0a7d4f;
+  --c-accent-ink: #ffffff;
+  --c-accent-dim: #6fbf9a;
+  --c-blue: #0b5fc4;
+  --c-amber: #9a6500;
+  --c-red: #c4150c;
+  --c-green: #0a7d4f;
+  --c-violet: #6d28d9;
+  --c-gold: #9a6500;
+  --c-teal: #0a7d7d;
+  --md-code-bg: color-mix(in srgb, var(--c-blue) 10%, #ffffff);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.22);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.28);
+  /* pale tint + dark ink so badges stay legible on white */
+  --mach-bg-sl: 65% 88%;
+  --mach-fg-sl: 60% 26%;
+  --mach-border-sl: 50% 64%;
+}
+
+/* ---- Color-blind safe (Okabe-Ito) — the recognized qualitative palette that
+   stays distinguishable across protanopia, deuteranopia and tritanopia. Status
+   colors are mapped so ok/warn/danger/info never collide for any common CVD:
+   ok = bluish-green, warn = orange, danger = vermillion, info = sky-blue,
+   accent = blue. Pair with the text labels / icons the components already carry
+   so meaning is never conveyed by hue alone. Dark base for low glare. */
+[data-theme="colorblind"] {
+  --c-bg: #16181d;
+  --c-bg-elev: #1d2027;
+  --c-bg-elev-2: #262a33;
+  --c-surface: #1d2027;
+  --c-border: #353a44;
+  --c-border-strong: #4a505c;
+  --c-text: #f2f4f8;
+  --c-text-muted: #b6bdc9;
+  --c-text-faint: #828b99;
+  --c-accent: #56b4e9; /* sky blue — distinct from the green "ok" */
+  --c-accent-ink: #06131c;
+  --c-accent-dim: #2c6f93;
+  --c-blue: #56b4e9; /* sky blue */
+  --c-amber: #e69f00; /* orange */
+  --c-red: #d55e00; /* vermillion */
+  --c-green: #009e73; /* bluish green */
+  --c-violet: #cc79a7; /* reddish purple */
+  --c-gold: #f0e442; /* yellow */
+  --c-teal: #009e73;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
+  --mach-bg-sl: 45% 24%;
+  --mach-fg-sl: 70% 82%;
+  --mach-border-sl: 45% 40%;
+}