@dorsk/tsumikit 0.22.0 → 0.24.0

package/dist/styles/variables.css

@@ -1,918 +1,8 @@
 /*
- * 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).
+ * THEME — tokens.css (`:root` contract) + themes.css (built-in `[data-theme]`
+ * blocks). Kept as one entry point for backwards compatibility; import the two
+ * parts directly to ship your own palette without the built-in themes.
  */
 
-: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);
-  /* Adaptive ink for filled positive actions: dark canvas ink on bright greens,
-     light canvas ink on the darker greens used by light themes. */
-  --text-on-success: var(--bg);
-
-  --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 ----
-	   `size="sm"` is the compact toolbar contract shared by Button, Popover and
-	   SegmentedControl. `control` is the roomier uniform-height contract used by
-	   Button and other composer controls. Both remain rem-based for zoom. */
-  --control-height-compact: 2rem;
-  --control-height-default: 2.5rem;
-  --control-height-large: 3rem;
-  --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%;
-}
-
-/* ===================================================================
-   Medium-light tier (TSU-1) — light but not blinding. Cream/paper or
-   soft-tinted backgrounds (never pure white) with dark, saturated
-   accents so body text clears WCAG AA. Each ports a famous palette in a
-   distinct color base. They share the light-theme contract: color-scheme
-   light, soft shadows, pale-tint/dark-ink machine badges.
-   =================================================================== */
-
-/* ---- Gruvbox Light (medium) — warm wood/cream, faded orange accent. */
-[data-theme="gruvboxlight"] {
-  color-scheme: light;
-  --c-bg: #fbf1c7;
-  --c-bg-elev: #f9f5d7;
-  --c-bg-elev-2: #ebdbb2;
-  --c-surface: #f9f5d7;
-  --c-border: #d5c4a1;
-  --c-border-strong: #bdae93;
-  --c-text: #3c3836;
-  --c-text-muted: #504945;
-  --c-text-faint: #7c6f64;
-  --c-accent: #af3a03;
-  --c-accent-ink: #fbf1c7;
-  --c-accent-dim: #d65d0e;
-  --c-blue: #076678;
-  --c-amber: #b57614;
-  --c-red: #9d0006;
-  --c-green: #79740e;
-  --c-violet: #8f3f71;
-  --c-gold: #b57614;
-  --c-teal: #427b58;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, 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);
-  --mach-bg-sl: 45% 86%;
-  --mach-fg-sl: 55% 30%;
-  --mach-border-sl: 40% 68%;
-}
-
-/* ---- Solarized Light — Ethan Schoonover's base3 paper with 16-color accents. */
-[data-theme="solarizedlight"] {
-  color-scheme: light;
-  --c-bg: #fdf6e3;
-  --c-bg-elev: #fbf3e0;
-  --c-bg-elev-2: #eee8d5;
-  --c-surface: #fbf3e0;
-  --c-border: #ddd6c1;
-  --c-border-strong: #cbc4ad;
-  --c-text: #073642;
-  --c-text-muted: #586e75;
-  --c-text-faint: #839496;
-  --c-accent: #2aa198;
-  --c-accent-ink: #fdf6e3;
-  --c-accent-dim: #2aa198;
-  --c-blue: #268bd2;
-  --c-amber: #b58900;
-  --c-red: #dc322f;
-  --c-green: #859900;
-  --c-violet: #6c71c4;
-  --c-gold: #b58900;
-  --c-teal: #2aa198;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(88, 110, 117, 0.12);
-  --shadow-md: 0 6px 20px rgba(88, 110, 117, 0.16);
-  --shadow-lg: 0 12px 40px rgba(88, 110, 117, 0.22);
-  --mach-bg-sl: 45% 86%;
-  --mach-fg-sl: 50% 30%;
-  --mach-border-sl: 40% 68%;
-}
-
-/* ---- Everforest Light (medium) — soft sage/green paper, low-contrast calm. */
-[data-theme="everforestlight"] {
-  color-scheme: light;
-  --c-bg: #fdf6e3;
-  --c-bg-elev: #f4f0d9;
-  --c-bg-elev-2: #efebd4;
-  --c-surface: #f4f0d9;
-  --c-border: #e0dcc7;
-  --c-border-strong: #bdc3af;
-  --c-text: #5c6a72;
-  --c-text-muted: #708089;
-  --c-text-faint: #939f91;
-  --c-accent: #8da101;
-  --c-accent-ink: #fdf6e3;
-  --c-accent-dim: #8da101;
-  --c-blue: #3a94c5;
-  --c-amber: #dfa000;
-  --c-red: #f85552;
-  --c-green: #8da101;
-  --c-violet: #df69ba;
-  --c-gold: #dfa000;
-  --c-teal: #35a77c;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(92, 106, 114, 0.12);
-  --shadow-md: 0 6px 20px rgba(92, 106, 114, 0.16);
-  --shadow-lg: 0 12px 40px rgba(92, 106, 114, 0.22);
-  --mach-bg-sl: 35% 86%;
-  --mach-fg-sl: 45% 32%;
-  --mach-border-sl: 30% 68%;
-}
-
-/* ---- Rosé Pine Dawn — official light variant: muted rose, iris, foam. */
-[data-theme="rosepinedawn"] {
-  color-scheme: light;
-  --c-bg: #faf4ed;
-  --c-bg-elev: #fffaf3;
-  --c-bg-elev-2: #f2e9e1;
-  --c-surface: #fffaf3;
-  --c-border: #dfdad9;
-  --c-border-strong: #cecacd;
-  --c-text: #575279;
-  --c-text-muted: #797593;
-  --c-text-faint: #9893a5;
-  --c-accent: #907aa9;
-  --c-accent-ink: #faf4ed;
-  --c-accent-dim: #907aa9;
-  --c-blue: #286983;
-  --c-amber: #ea9d34;
-  --c-red: #b4637a;
-  --c-green: #56949f;
-  --c-violet: #907aa9;
-  --c-gold: #ea9d34;
-  --c-teal: #56949f;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(87, 82, 121, 0.1);
-  --shadow-md: 0 6px 20px rgba(87, 82, 121, 0.14);
-  --shadow-lg: 0 12px 40px rgba(87, 82, 121, 0.2);
-  --mach-bg-sl: 35% 88%;
-  --mach-fg-sl: 30% 38%;
-  --mach-border-sl: 28% 72%;
-}
-
-/* ---- Catppuccin Latte — the official light flavour: neutral with mauve accent. */
-[data-theme="latte"] {
-  color-scheme: light;
-  --c-bg: #eff1f5;
-  --c-bg-elev: #e6e9ef;
-  --c-bg-elev-2: #dce0e8;
-  --c-surface: #e6e9ef;
-  --c-border: #ccd0da;
-  --c-border-strong: #bcc0cc;
-  --c-text: #4c4f69;
-  --c-text-muted: #5c5f77;
-  --c-text-faint: #8c8fa1;
-  --c-accent: #8839ef;
-  --c-accent-ink: #eff1f5;
-  --c-accent-dim: #8839ef;
-  --c-blue: #1e66f5;
-  --c-amber: #df8e1d;
-  --c-red: #d20f39;
-  --c-green: #40a02b;
-  --c-violet: #8839ef;
-  --c-gold: #df8e1d;
-  --c-teal: #179299;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 10%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.1);
-  --shadow-md: 0 6px 20px rgba(76, 79, 105, 0.14);
-  --shadow-lg: 0 12px 40px rgba(76, 79, 105, 0.2);
-  --mach-bg-sl: 45% 88%;
-  --mach-fg-sl: 45% 34%;
-  --mach-border-sl: 35% 72%;
-}
-
-/* ---- Nord Light — Snow Storm base, Polar Night ink, darkened Frost/Aurora
-   accents so they read against the pale blue-gray paper. */
-[data-theme="nordlight"] {
-  color-scheme: light;
-  --c-bg: #eceff4;
-  --c-bg-elev: #f4f6f9;
-  --c-bg-elev-2: #e5e9f0;
-  --c-surface: #f4f6f9;
-  --c-border: #d8dee9;
-  --c-border-strong: #c2cad6;
-  --c-text: #2e3440;
-  --c-text-muted: #434c5e;
-  --c-text-faint: #6b7689;
-  --c-accent: #5e81ac;
-  --c-accent-ink: #eceff4;
-  --c-accent-dim: #5e81ac;
-  --c-blue: #5e81ac;
-  --c-amber: #9a6f12;
-  --c-red: #bf616a;
-  --c-green: #5a7444;
-  --c-violet: #9a6c93;
-  --c-gold: #9a6f12;
-  --c-teal: #3a8a87;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.1);
-  --shadow-md: 0 6px 20px rgba(46, 52, 64, 0.14);
-  --shadow-lg: 0 12px 40px rgba(46, 52, 64, 0.2);
-  --mach-bg-sl: 30% 88%;
-  --mach-fg-sl: 35% 34%;
-  --mach-border-sl: 28% 72%;
-}
-
-/* ---- Tokyo Night Day — the official light variant: muted blue paper, the
-   signature blue ink, saturated day accents. */
-[data-theme="tokyoday"] {
-  color-scheme: light;
-  --c-bg: #e1e2e7;
-  --c-bg-elev: #eaeaee;
-  --c-bg-elev-2: #d5d6db;
-  --c-surface: #eaeaee;
-  --c-border: #c4c8da;
-  --c-border-strong: #a8acc4;
-  --c-text: #3760bf;
-  --c-text-muted: #6172b0;
-  --c-text-faint: #848cb5;
-  --c-accent: #2e7de9;
-  --c-accent-ink: #ffffff;
-  --c-accent-dim: #2e7de9;
-  --c-blue: #2e7de9;
-  --c-amber: #8c6c3e;
-  --c-red: #f52a65;
-  --c-green: #587539;
-  --c-violet: #9854f1;
-  --c-gold: #8c6c3e;
-  --c-teal: #118c74;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(55, 96, 191, 0.1);
-  --shadow-md: 0 6px 20px rgba(55, 96, 191, 0.14);
-  --shadow-lg: 0 12px 40px rgba(55, 96, 191, 0.2);
-  --mach-bg-sl: 40% 88%;
-  --mach-fg-sl: 45% 34%;
-  --mach-border-sl: 32% 72%;
-}
-
-/* ---- Kanagawa Lotus — the official light variant: warm woodblock paper,
-   ink-violet accent, muted earthen hues (brownish base). */
-[data-theme="kanagawalotus"] {
-  color-scheme: light;
-  --c-bg: #f2ecbc;
-  --c-bg-elev: #ebe3b0;
-  --c-bg-elev-2: #e5ddb0;
-  --c-surface: #ebe3b0;
-  --c-border: #d5cea3;
-  --c-border-strong: #c9c193;
-  --c-text: #545464;
-  --c-text-muted: #766b90;
-  --c-text-faint: #a09cac;
-  --c-accent: #624c83;
-  --c-accent-ink: #f2ecbc;
-  --c-accent-dim: #624c83;
-  --c-blue: #4d699b;
-  --c-amber: #cc6d00;
-  --c-red: #c84053;
-  --c-green: #6f894e;
-  --c-violet: #624c83;
-  --c-gold: #836f4a;
-  --c-teal: #597b75;
-  --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
-  --shadow-sm: 0 1px 2px rgba(84, 84, 100, 0.12);
-  --shadow-md: 0 6px 20px rgba(84, 84, 100, 0.16);
-  --shadow-lg: 0 12px 40px rgba(84, 84, 100, 0.22);
-  --mach-bg-sl: 35% 84%;
-  --mach-fg-sl: 35% 34%;
-  --mach-border-sl: 30% 66%;
-}
+@import './tokens.css';
+@import './themes.css';