@dorsk/tsumikit 0.22.0 → 0.24.0

package/dist/styles/themes.css

@@ -0,0 +1,729 @@
+/*
+ * BUILT-IN THEMES — one `[data-theme="id"]` block per entry of THEMES
+ * (stores/theme.svelte.ts). Each block flips palette tokens only; everything
+ * downstream of tokens.css is unchanged.
+ *
+ * Consumer theme contract: a `[data-theme="x"]` block must set `color-scheme`
+ * (light themes; :root defaults to dark), every --c-* palette token, the three
+ * --shadow-* tokens and the three --mach-*-sl pairs. --md-code-bg is optional.
+ */
+
+[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%;
+}