/* ============================================================================
   The Tech Margin — design tokens (canonical)
   Verbatim from the TTM design system spec (§CSS Variables Quick Reference).
   RULE: components use var(--ttm-*) only — never hardcoded hex — so persona
   palettes, the terminal theme, and the admin theme customizer all cascade.
   Dark is default. Terminal activates via .terminal or [data-theme="terminal"]
   (spec API) — theme.js maps the site-wide [data-ttm-theme] attr onto these.
   ========================================================================== */
:root {
  /* Surfaces — dark brown/black scheme */
  --ttm-bg: #0f0b08;
  --ttm-bg-alt: #181210;
  --ttm-surface: #181210;
  --ttm-surface-alt: #241c17;

  /* Text — warm ink to match the brown ground */
  --ttm-text: #f4efe8;
  --ttm-text-secondary: #d5ccc1;
  --ttm-text-muted: #9c9184;
  --ttm-text-faint: #574b40;

  /* Borders */
  --ttm-border: #3a2f26;
  --ttm-border-subtle: #241c17;

  /* Brand Colors */
  --ttm-pink: #E904E5;
  --ttm-lime: #a1ff00;
  --ttm-cyan: #09FFF0;
  --ttm-hot-red: #ff0080;
  --ttm-goldenrod: #ff9500;
  --ttm-plum: #21262d;

  /* Status */
  --ttm-success: #22c55e;
  --ttm-danger: var(--ttm-hot-red);
  --ttm-warning: var(--ttm-goldenrod);
  --ttm-info: var(--ttm-cyan);

  /* Overlays */
  --ttm-overlay: rgba(15, 11, 8, 0.82);
  --ttm-glass: rgba(24, 18, 16, 0.9);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.08);

  /* Z-Index — never raw numbers */
  --z-base: 1;
  --z-content: 10;
  --z-controls: 20;
  --z-dropdown: 30;
  --z-sticky: 40;
  --z-header: 50;
  --z-modal: 60;
  --z-overlay: 9999;

  /* Radius — 0.7rem everywhere */
  --ttm-radius: 0.7rem;
  --radius-sm: calc(var(--ttm-radius) - 4px);
  --radius-md: calc(var(--ttm-radius) - 2px);
  --radius-lg: var(--ttm-radius);
  --radius-xl: calc(var(--ttm-radius) + 4px);

  /* Fonts */
  --ttm-font-sans: 'Poppins', 'Inter Tight', system-ui, sans-serif;
  --ttm-font-serif: 'Pacifico', 'Caveat', cursive;
  --ttm-font-mono: 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --ttm-font-voice: 'Special Elite', var(--ttm-font-mono); /* Bernard's typewriter */

  /* Type scale */
  --ttm-fs-display: 4.5rem;
  --ttm-fs-h1: 3rem;
  --ttm-fs-h2: 2rem;
  --ttm-fs-h3: 1.5rem;
  --ttm-fs-h4: 1.25rem;
  --ttm-fs-body: 1rem;
  --ttm-fs-small: 0.875rem;   /* 14px minimum enforced */
  --ttm-fs-caption: 0.75rem;

  /* Role tokens — taste dials. Pink is reserved for primary CTAs and brand
     moments; interactive chrome (focus, switches, current-page) runs on the
     quieter control accent. */
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-control: var(--ttm-cyan);
  --ttm-focus: var(--ttm-cyan);

  /* Derived: readable ink on top of each accent (dark ink passes AA on all
     five accents; white fails on pink/cyan/lime — measured, not assumed) */
  --ttm-on-accent: var(--ttm-bg);

  /* Lifecycle states (the map's semantic vocabulary — themable, but change
     with care: green=alive, red=broken, cobalt=claimed is load-bearing) */
  --ttm-state-seeded: #8b949e;
  --ttm-state-confirmed: #1d4ed8;
  --ttm-state-open: #0F6E56;
  --ttm-state-shut: #7aa695;
  --ttm-state-aging: #a16207;
  --ttm-state-zombie: #8a5a00;
  --ttm-state-dead: #57534e;
  --ttm-state-broken: #c0392b;

  /* Elevation */
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Spacing scale (spec §Spacing) — components and whitelabel share it */
  --ttm-spacing-xs: 0.25rem;
  --ttm-spacing-sm: 0.5rem;
  --ttm-spacing-md: 1rem;
  --ttm-spacing-lg: 1.5rem;
  --ttm-spacing-xl: 2rem;
  --ttm-spacing-2xl: 3rem;
  --ttm-spacing-3xl: 4rem;

  /* Motion (spec §Transitions) — reduced-motion collapses these globally */
  --ttm-transition-fast: 150ms ease;
  --ttm-transition-normal: 200ms ease;
  --ttm-transition-slow: 300ms ease;

  /* Animation durations — every keyframe run wears one of these, so motion
     is themable and the reduced-motion collapse catches all of it */
  --ttm-anim-pop: 220ms;      /* entrances: toasts, menus */
  --ttm-anim-flash: 900ms;    /* one-shot attention: fresh sensor values */
  --ttm-anim-pulse: 2400ms;   /* heartbeat: live indicators */
  --ttm-anim-shimmer: 8s;     /* ambient: iridescent brand rule */

  /* Accent hover variants (spec §Brand Colors) */
  --ttm-pink-hover: #c903c5;
  --ttm-lime-hover: #8ae600;
  --ttm-cyan-hover: #07ccc0;
  --ttm-hot-red-hover: #e60073;
  --ttm-goldenrod-hover: #e68600;

  /* Iridescent pearl spectrum (brand shimmer — favicon, header rule) */
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;

  /* Scrollbar (spec §Scrollbar) */
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-cyan) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-cyan) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* Terminal theme — one palette, three spec-compatible selectors:
   .terminal / [data-theme="terminal"] (spec API) and [data-ttm-theme="terminal"]
   (site-wide attr set by theme.js). Defined once — :is() keeps them in sync. */
:is(.terminal, [data-theme="terminal"], [data-ttm-theme="terminal"]) {
  --ttm-bg: #f2ede1;
  --ttm-bg-alt: #e9e2d2;
  --ttm-surface: #e9e2d2;
  --ttm-surface-alt: #ddd4c0;
  --ttm-text: #2b2a28;
  --ttm-text-secondary: #4a4844;
  --ttm-text-muted: #635f57;   /* AA 4.9:1 on surface — #6f6b63 measured 4.11 */
  --ttm-text-faint: #a09a8c;
  --ttm-border: #c9c0aa;
  --ttm-border-subtle: #ddd4c0;
  --ttm-pink: #b83570;         /* deep rose: light on-accent ink passes AA (4.7:1) */
  --ttm-lime: #7c9f35;
  --ttm-cyan: #09d3c5;
  --ttm-hot-red: #ff5555;
  --ttm-goldenrod: #f1a942;
  --ttm-pink-hover: #a52e63;
  --ttm-lime-hover: #6b8c2c;
  --ttm-cyan-hover: #08b8ab;
  --ttm-hot-red-hover: #e64444;
  --ttm-goldenrod-hover: #dd9631;
  /* Status + chrome accents re-derived for the light ground — the bright
     dark-theme values measure 1.1–3.2:1 here; these pass AA/1.4.11 */
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #0f6674;
  --ttm-control: #0f6674;
  --ttm-focus: #0f6674;
  --ttm-overlay: rgba(43, 42, 40, 0.5);
  --ttm-glass: rgba(242, 237, 225, 0.9);
  --ttm-wash: rgba(43, 42, 40, 0.04);
  --ttm-wash-hover: rgba(43, 42, 40, 0.08);
  --ttm-font-sans: var(--ttm-font-mono);
  --ttm-font-serif: var(--ttm-font-mono);
  --ttm-on-accent: #f2ede1;
  --ttm-shadow: 3px 3px 0 var(--ttm-text);
  /* Pearl spectrum deepened for the paper ground */
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  /* Re-declare derived role tokens: custom-property var()s substitute where
     DECLARED, so without these a terminal-themed subtree would inherit the
     dark theme's already-resolved values from :root */
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-cyan) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-cyan) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* Zine theme — photocopy paper: hard white ground, black ink borders,
   electric magenta + violet accents. Same three spec-compatible selectors
   as terminal. Status/chrome accents are re-derived for the white ground
   (the neon brand values measure < 3:1 there); the bench asserts AA. */
:is(.zine, [data-theme="zine"], [data-ttm-theme="zine"]) {
  --ttm-bg: #ffffff;
  --ttm-bg-alt: #f4f1f6;
  --ttm-surface: #faf8fc;
  --ttm-surface-alt: #ece7f1;
  --ttm-text: #17131a;
  --ttm-text-secondary: #3d3745;
  --ttm-text-muted: #5f5766;
  --ttm-text-faint: #a79fae;
  --ttm-border: #17131a;          /* zine ink: borders are drawn, not implied */
  --ttm-border-subtle: #e2dce8;
  --ttm-pink: #c203be;            /* magenta ink — AA as text on white */
  --ttm-lime: #4c7a00;
  --ttm-cyan: #067a72;
  --ttm-hot-red: #d6006b;
  --ttm-goldenrod: #a36a00;
  --ttm-pink-hover: #a3039f;
  --ttm-lime-hover: #3f6600;
  --ttm-cyan-hover: #05635d;
  --ttm-hot-red-hover: #b8005c;
  --ttm-goldenrod-hover: #8a5a00;
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #6d28d9;
  --ttm-control: #6d28d9;         /* violet chrome — the zine spot color */
  --ttm-focus: #6d28d9;
  --ttm-overlay: rgba(23, 19, 26, 0.5);
  --ttm-glass: rgba(255, 255, 255, 0.92);
  --ttm-wash: rgba(23, 19, 26, 0.04);
  --ttm-wash-hover: rgba(23, 19, 26, 0.08);
  --ttm-on-accent: #ffffff;
  --ttm-shadow: 4px 4px 0 var(--ttm-text);  /* pasted-sticker offset */
  /* Pearl spectrum inked for paper */
  --ttm-irid-a: #d6467c;
  --ttm-irid-b: #b565c9;
  --ttm-irid-c: #4d7fe0;
  --ttm-irid-d: #3fa4c9;
  --ttm-irid-e: #7ba32c;
  /* Re-declare derived role tokens (var()s substitute where DECLARED) */
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* ── Light/dark modes for every preset ──────────────────────────────────────
   Each theme names a WORLD (warm, terminal, zine); the mode names its
   POLARITY. theme.js resolves the visitor's choice (or the OS preference)
   into a concrete data-ttm-mode attribute before paint, so every variant is
   defined exactly once here — no prefers-color-scheme duplication.
   Defaults stay as shipped: ttm is dark-native, terminal and zine are
   light-native; the blocks below define each theme's other polarity. */

/* Dark (ttm), light mode — warm ivory, same neon family inked for paper */
:is([data-ttm-theme="ttm"], :root:not([data-ttm-theme]))[data-ttm-mode="light"] {
  --ttm-bg: #faf7f2;
  --ttm-bg-alt: #f1ece4;
  --ttm-surface: #f1ece4;
  --ttm-surface-alt: #e6dfd3;
  --ttm-text: #241c15;
  --ttm-text-secondary: #4a4238;
  --ttm-text-muted: #675d51;
  --ttm-text-faint: #a89c8e;
  --ttm-border: #d8cfc0;
  --ttm-border-subtle: #ece5da;
  --ttm-pink: #a3128f;
  --ttm-lime: #5c7d10;
  --ttm-cyan: #0c7d74;
  --ttm-hot-red: #cf0a5e;
  --ttm-goldenrod: #9a6200;
  --ttm-pink-hover: #8a0f79;
  --ttm-lime-hover: #4c680d;
  --ttm-cyan-hover: #0a655e;
  --ttm-hot-red-hover: #b00950;
  --ttm-goldenrod-hover: #7d4f00;
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #0c7d74;
  --ttm-control: #0c7d74;
  --ttm-focus: #0c7d74;
  --ttm-overlay: rgba(36, 28, 21, 0.5);
  --ttm-glass: rgba(250, 247, 242, 0.92);
  --ttm-wash: rgba(36, 28, 21, 0.05);
  --ttm-wash-hover: rgba(36, 28, 21, 0.09);
  --ttm-on-accent: #faf7f2;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(80, 60, 40, 0.18);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-cyan) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-cyan) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* Terminal, dark mode — CRT phosphor: green-tinted black, pale phosphor ink */
[data-ttm-theme="terminal"][data-ttm-mode="dark"] {
  --ttm-bg: #0b100c;
  --ttm-bg-alt: #11170f;
  --ttm-surface: #11170f;
  --ttm-surface-alt: #1a231a;
  --ttm-text: #d7e8cf;
  --ttm-text-secondary: #b3c9ab;
  --ttm-text-muted: #8aa681;
  --ttm-text-faint: #46543f;
  --ttm-border: #2c3a2a;
  --ttm-border-subtle: #1a231a;
  --ttm-pink: #e878b8;
  --ttm-lime: #a1ff00;
  --ttm-cyan: #09d3c5;
  --ttm-hot-red: #ff6b6b;
  --ttm-goldenrod: #f1a942;
  --ttm-pink-hover: #d45fa4;
  --ttm-lime-hover: #8ae600;
  --ttm-cyan-hover: #08b8ab;
  --ttm-hot-red-hover: #e65555;
  --ttm-goldenrod-hover: #dd9631;
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #4ce0d2;
  --ttm-control: #4ce0d2;
  --ttm-focus: #4ce0d2;
  --ttm-overlay: rgba(11, 16, 12, 0.82);
  --ttm-glass: rgba(17, 23, 15, 0.9);
  --ttm-wash: rgba(215, 232, 207, 0.05);
  --ttm-wash-hover: rgba(215, 232, 207, 0.09);
  --ttm-on-accent: #0b100c;
  --ttm-shadow: 3px 3px 0 #000000;
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-font-sans: var(--ttm-font-mono);
  --ttm-font-serif: var(--ttm-font-mono);
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-cyan) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-cyan) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* Zine, dark mode — inverted photocopy: black paper, white ink, neon spots */
[data-ttm-theme="zine"][data-ttm-mode="dark"] {
  --ttm-bg: #0d0a0f;
  --ttm-bg-alt: #17121c;
  --ttm-surface: #120e16;
  --ttm-surface-alt: #1f1826;
  --ttm-text: #f5f2f7;
  --ttm-text-secondary: #d4cede;
  --ttm-text-muted: #a79fae;
  --ttm-text-faint: #57505e;
  --ttm-border: #f5f2f7;          /* white ink — the photocopy inverts */
  --ttm-border-subtle: #292231;
  --ttm-pink: #ff3bfb;
  --ttm-lime: #b6ff4d;
  --ttm-cyan: #4dffef;
  --ttm-hot-red: #ff4d94;
  --ttm-goldenrod: #ffb020;
  --ttm-pink-hover: #e620e2;
  --ttm-lime-hover: #a1f036;
  --ttm-cyan-hover: #2eeedd;
  --ttm-hot-red-hover: #ef3a83;
  --ttm-goldenrod-hover: #f0a010;
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #b794f6;
  --ttm-control: #b794f6;
  --ttm-focus: #b794f6;
  --ttm-overlay: rgba(13, 10, 15, 0.82);
  --ttm-glass: rgba(18, 14, 22, 0.9);
  --ttm-wash: rgba(245, 242, 247, 0.05);
  --ttm-wash-hover: rgba(245, 242, 247, 0.09);
  --ttm-on-accent: #0d0a0f;
  --ttm-shadow: 4px 4px 0 var(--ttm-text);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-pink);
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* ── Preset library: seven more worlds, each dark-base + light override.

   Generated systematically; every combination is WCAG-AA-verified by

   the bench (text pairs 4.5:1, interactive chrome 3:1) on each run. ── */

[data-ttm-theme="ocean"] {
  --ttm-bg: #081018;
  --ttm-bg-alt: #0d1722;
  --ttm-surface: #0d1722;
  --ttm-surface-alt: #16222f;
  --ttm-text: #eaf2f8;
  --ttm-text-secondary: #c3d4e0;
  --ttm-text-muted: #93aabc;
  --ttm-text-faint: #48606f;
  --ttm-border: #24384a;
  --ttm-border-subtle: #16222f;
  --ttm-pink: #f472b6;
  --ttm-lime: #a3e635;
  --ttm-cyan: #38bdf8;
  --ttm-hot-red: #fb7185;
  --ttm-goldenrod: #fbbf24;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #38bdf8;
  --ttm-control: #38bdf8;
  --ttm-focus: #38bdf8;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #081018;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #38bdf8;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="ocean"][data-ttm-mode="light"] {
  --ttm-bg: #f4f8fb;
  --ttm-bg-alt: #e9f1f7;
  --ttm-surface: #e9f1f7;
  --ttm-surface-alt: #dbe7f0;
  --ttm-text: #10222f;
  --ttm-text-secondary: #32485a;
  --ttm-text-muted: #4f6779;
  --ttm-text-faint: #9db1c0;
  --ttm-border: #c2d4e2;
  --ttm-border-subtle: #dbe7f0;
  --ttm-pink: #b0347c;
  --ttm-lime: #4d7c0f;
  --ttm-cyan: #0b6a94;
  --ttm-hot-red: #be123c;
  --ttm-goldenrod: #92610a;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #0b6a94;
  --ttm-control: #0b6a94;
  --ttm-focus: #0b6a94;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #f4f8fb;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #0b6a94;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="forest"] {
  --ttm-bg: #0a120c;
  --ttm-bg-alt: #101a12;
  --ttm-surface: #101a12;
  --ttm-surface-alt: #1a281d;
  --ttm-text: #e8f2e8;
  --ttm-text-secondary: #c2d4c3;
  --ttm-text-muted: #92ab95;
  --ttm-text-faint: #4a5f4d;
  --ttm-border: #2b4030;
  --ttm-border-subtle: #1a281d;
  --ttm-pink: #e879b9;
  --ttm-lime: #a3e635;
  --ttm-cyan: #34d399;
  --ttm-hot-red: #fb7185;
  --ttm-goldenrod: #fbbf24;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #34d399;
  --ttm-control: #34d399;
  --ttm-focus: #34d399;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #0a120c;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #a3e635;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="forest"][data-ttm-mode="light"] {
  --ttm-bg: #f4f8f2;
  --ttm-bg-alt: #e9f0e4;
  --ttm-surface: #e9f0e4;
  --ttm-surface-alt: #dae6d2;
  --ttm-text: #16220f;
  --ttm-text-secondary: #3a4a30;
  --ttm-text-muted: #53644a;
  --ttm-text-faint: #9cab90;
  --ttm-border: #bfd2b4;
  --ttm-border-subtle: #dae6d2;
  --ttm-pink: #a83a8a;
  --ttm-lime: #4d7c0f;
  --ttm-cyan: #0f766e;
  --ttm-hot-red: #b91c1c;
  --ttm-goldenrod: #8a5a00;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #2f6e33;
  --ttm-control: #2f6e33;
  --ttm-focus: #2f6e33;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #f4f8f2;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #2f6e33;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="synthwave"] {
  --ttm-bg: #120826;
  --ttm-bg-alt: #180d31;
  --ttm-surface: #180d31;
  --ttm-surface-alt: #241546;
  --ttm-text: #f2ecff;
  --ttm-text-secondary: #d4c8ee;
  --ttm-text-muted: #a89ac9;
  --ttm-text-faint: #574a7c;
  --ttm-border: #3b2a63;
  --ttm-border-subtle: #241546;
  --ttm-pink: #f472d0;
  --ttm-lime: #d8ff4d;
  --ttm-cyan: #67e8f9;
  --ttm-hot-red: #fb6ba2;
  --ttm-goldenrod: #fbbf24;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #67e8f9;
  --ttm-control: #67e8f9;
  --ttm-focus: #67e8f9;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #120826;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #f472d0;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="synthwave"][data-ttm-mode="light"] {
  --ttm-bg: #f8f5ff;
  --ttm-bg-alt: #efeafc;
  --ttm-surface: #efeafc;
  --ttm-surface-alt: #e2daf6;
  --ttm-text: #1d1230;
  --ttm-text-secondary: #43335f;
  --ttm-text-muted: #5d5079;
  --ttm-text-faint: #a598c2;
  --ttm-border: #c8bce8;
  --ttm-border-subtle: #e2daf6;
  --ttm-pink: #a3128f;
  --ttm-lime: #4d7c0f;
  --ttm-cyan: #0e7490;
  --ttm-hot-red: #be123c;
  --ttm-goldenrod: #92610a;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #6d28d9;
  --ttm-control: #6d28d9;
  --ttm-focus: #6d28d9;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #f8f5ff;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #6d28d9;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="ember"] {
  --ttm-bg: #140b08;
  --ttm-bg-alt: #1d110c;
  --ttm-surface: #1d110c;
  --ttm-surface-alt: #2b1a12;
  --ttm-text: #f8ece6;
  --ttm-text-secondary: #e0c9bc;
  --ttm-text-muted: #b6988a;
  --ttm-text-faint: #6b4a3a;
  --ttm-border: #46281c;
  --ttm-border-subtle: #2b1a12;
  --ttm-pink: #fb7185;
  --ttm-lime: #bef264;
  --ttm-cyan: #ffa94d;
  --ttm-hot-red: #ff6b6b;
  --ttm-goldenrod: #fbbf24;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #ffa94d;
  --ttm-control: #ffa94d;
  --ttm-focus: #ffa94d;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #140b08;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #ff6b6b;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="ember"][data-ttm-mode="light"] {
  --ttm-bg: #fbf5f0;
  --ttm-bg-alt: #f4e9e0;
  --ttm-surface: #f4e9e0;
  --ttm-surface-alt: #ead9cb;
  --ttm-text: #24140c;
  --ttm-text-secondary: #4c352a;
  --ttm-text-muted: #675043;
  --ttm-text-faint: #ab9384;
  --ttm-border: #d8bda9;
  --ttm-border-subtle: #ead9cb;
  --ttm-pink: #b0347c;
  --ttm-lime: #5c7d10;
  --ttm-cyan: #9a5200;
  --ttm-hot-red: #b91c1c;
  --ttm-goldenrod: #8a5a00;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #b3400f;
  --ttm-control: #b3400f;
  --ttm-focus: #b3400f;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #fbf5f0;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #b3400f;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="mono"] {
  --ttm-bg: #0d0d0d;
  --ttm-bg-alt: #141414;
  --ttm-surface: #141414;
  --ttm-surface-alt: #202020;
  --ttm-text: #f2f2f2;
  --ttm-text-secondary: #cfcfcf;
  --ttm-text-muted: #a0a0a0;
  --ttm-text-faint: #565656;
  --ttm-border: #383838;
  --ttm-border-subtle: #202020;
  --ttm-pink: #dedede;
  --ttm-lime: #efefef;
  --ttm-cyan: #bdbdbd;
  --ttm-hot-red: #8f8f8f;
  --ttm-goldenrod: #a8a8a8;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #8fd398;
  --ttm-danger: #e08585;
  --ttm-warning: #d4a95c;
  --ttm-info: #d4d4d4;
  --ttm-control: #d4d4d4;
  --ttm-focus: #d4d4d4;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #0d0d0d;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-font-sans: var(--ttm-font-mono);
  --ttm-font-serif: var(--ttm-font-mono);
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #f2f2f2;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="mono"][data-ttm-mode="light"] {
  --ttm-bg: #f7f7f7;
  --ttm-bg-alt: #efefef;
  --ttm-surface: #efefef;
  --ttm-surface-alt: #e2e2e2;
  --ttm-text: #161616;
  --ttm-text-secondary: #3d3d3d;
  --ttm-text-muted: #5c5c5c;
  --ttm-text-faint: #a3a3a3;
  --ttm-border: #c9c9c9;
  --ttm-border-subtle: #e2e2e2;
  --ttm-pink: #4a4a4a;
  --ttm-lime: #333333;
  --ttm-cyan: #5c5c5c;
  --ttm-hot-red: #757575;
  --ttm-goldenrod: #666666;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #2f6e33;
  --ttm-danger: #a02c2c;
  --ttm-warning: #7a5410;
  --ttm-info: #303030;
  --ttm-control: #303030;
  --ttm-focus: #303030;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #f7f7f7;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-font-sans: var(--ttm-font-mono);
  --ttm-font-serif: var(--ttm-font-mono);
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #262626;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="blueprint"] {
  --ttm-bg: #0a1630;
  --ttm-bg-alt: #10203f;
  --ttm-surface: #10203f;
  --ttm-surface-alt: #1a2d52;
  --ttm-text: #eaf1fb;
  --ttm-text-secondary: #c6d6ec;
  --ttm-text-muted: #96add0;
  --ttm-text-faint: #4a6390;
  --ttm-border: #2e4a75;
  --ttm-border-subtle: #1a2d52;
  --ttm-pink: #a5b4fc;
  --ttm-lime: #86efac;
  --ttm-cyan: #7dd3fc;
  --ttm-hot-red: #fca5a5;
  --ttm-goldenrod: #fcd34d;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #7dd3fc;
  --ttm-control: #7dd3fc;
  --ttm-focus: #7dd3fc;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #0a1630;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #7dd3fc;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="blueprint"][data-ttm-mode="light"] {
  --ttm-bg: #f2f6fc;
  --ttm-bg-alt: #e6eef8;
  --ttm-surface: #e6eef8;
  --ttm-surface-alt: #d6e2f2;
  --ttm-text: #122340;
  --ttm-text-secondary: #34496b;
  --ttm-text-muted: #4d6585;
  --ttm-text-faint: #9cb0cc;
  --ttm-border: #b7c9e0;
  --ttm-border-subtle: #d6e2f2;
  --ttm-pink: #6d28d9;
  --ttm-lime: #3f6212;
  --ttm-cyan: #1d4ed8;
  --ttm-hot-red: #be123c;
  --ttm-goldenrod: #92610a;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #1d4ed8;
  --ttm-control: #1d4ed8;
  --ttm-focus: #1d4ed8;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #f2f6fc;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #1d4ed8;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="bubblegum"] {
  --ttm-bg: #190811;
  --ttm-bg-alt: #22101a;
  --ttm-surface: #22101a;
  --ttm-surface-alt: #331827;
  --ttm-text: #fbeaf3;
  --ttm-text-secondary: #ecc9dc;
  --ttm-text-muted: #c497ad;
  --ttm-text-faint: #755065;
  --ttm-border: #543044;
  --ttm-border-subtle: #331827;
  --ttm-pink: #f9a8d4;
  --ttm-lime: #bef264;
  --ttm-cyan: #67e8f9;
  --ttm-hot-red: #fb7185;
  --ttm-goldenrod: #fbbf24;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #ffffff);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #ffffff);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #ffffff);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #ffffff);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #ffffff);
  --ttm-success: #4ade80;
  --ttm-danger: #ff6b6b;
  --ttm-warning: #ffb84d;
  --ttm-info: #f9a8d4;
  --ttm-control: #f9a8d4;
  --ttm-focus: #f9a8d4;
  --ttm-overlay: rgba(0, 0, 0, 0.72);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(255, 255, 255, 0.05);
  --ttm-wash-hover: rgba(255, 255, 255, 0.09);
  --ttm-on-accent: #190811;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ttm-irid-a: #ff9a9e;
  --ttm-irid-b: #fecfef;
  --ttm-irid-c: #a1c4fd;
  --ttm-irid-d: #c2e9fb;
  --ttm-irid-e: #d4fc79;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #f9a8d4;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

[data-ttm-theme="bubblegum"][data-ttm-mode="light"] {
  --ttm-bg: #fdf4f9;
  --ttm-bg-alt: #fae7f1;
  --ttm-surface: #fae7f1;
  --ttm-surface-alt: #f3d5e5;
  --ttm-text: #2b1220;
  --ttm-text-secondary: #57304a;
  --ttm-text-muted: #714862;
  --ttm-text-faint: #bb92a7;
  --ttm-border: #e3b4cd;
  --ttm-border-subtle: #f3d5e5;
  --ttm-pink: #b0347c;
  --ttm-lime: #4d7c0f;
  --ttm-cyan: #0e7490;
  --ttm-hot-red: #be123c;
  --ttm-goldenrod: #8a5a00;
  --ttm-pink-hover: color-mix(in srgb, var(--ttm-pink) 82%, #000000);
  --ttm-lime-hover: color-mix(in srgb, var(--ttm-lime) 82%, #000000);
  --ttm-cyan-hover: color-mix(in srgb, var(--ttm-cyan) 82%, #000000);
  --ttm-hot-red-hover: color-mix(in srgb, var(--ttm-hot-red) 82%, #000000);
  --ttm-goldenrod-hover: color-mix(in srgb, var(--ttm-goldenrod) 82%, #000000);
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #b0347c;
  --ttm-control: #b0347c;
  --ttm-focus: #b0347c;
  --ttm-overlay: rgba(30, 30, 40, 0.5);
  --ttm-glass: color-mix(in srgb, var(--ttm-surface) 90%, transparent);
  --ttm-wash: rgba(20, 20, 30, 0.05);
  --ttm-wash-hover: rgba(20, 20, 30, 0.09);
  --ttm-on-accent: #fdf4f9;
  --ttm-shadow: 0 0 0 1.5px var(--ttm-border), 0 8px 24px rgba(60, 60, 80, 0.16);
  --ttm-irid-a: #e2797e;
  --ttm-irid-b: #d99cc4;
  --ttm-irid-c: #7fa7ec;
  --ttm-irid-d: #7fc0e0;
  --ttm-irid-e: #a3cf4a;
  --ttm-accent-cta: var(--ttm-cta-src);
  --ttm-cta-src: #b0347c;
  --ttm-scrollbar-thumb: color-mix(in srgb, var(--ttm-control) 30%, transparent);
  --ttm-scrollbar-thumb-hover: color-mix(in srgb, var(--ttm-control) 50%, transparent);
  --ttm-scrollbar-track: color-mix(in srgb, var(--ttm-bg) 50%, transparent);
}

/* Token-driven scrollbars (spec §Scrollbar) */
* { scrollbar-width: thin; scrollbar-color: var(--ttm-scrollbar-thumb) var(--ttm-scrollbar-track); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--ttm-scrollbar-track); border-radius: var(--radius-sm); }
*::-webkit-scrollbar-thumb { background: var(--ttm-scrollbar-thumb); border-radius: var(--radius-sm); }
*::-webkit-scrollbar-thumb:hover { background: var(--ttm-scrollbar-thumb-hover); }

/* Signature rainbow gradient (spec §Gradients) */
.gradient-text-rainbow {
  background: linear-gradient(90deg,
    var(--ttm-cyan), var(--ttm-hot-red), var(--ttm-pink),
    var(--ttm-lime), var(--ttm-goldenrod));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glows (spec §Gradients) — color-mix keeps them token-driven */
.glow-pink { box-shadow: 0 0 20px color-mix(in srgb, var(--ttm-pink) 50%, transparent); }
.glow-cyan { box-shadow: 0 0 20px color-mix(in srgb, var(--ttm-cyan) 50%, transparent); }
.glow-lime { box-shadow: 0 0 20px color-mix(in srgb, var(--ttm-lime) 50%, transparent); }

/* A11y baseline (spec §Accessibility) */
.ttm-focusable:focus-visible,
[data-theme] :focus-visible,
.terminal :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ttm-bg), 0 0 0 4px var(--ttm-pink);
}
@media (prefers-reduced-motion: reduce) {
  .ttm-anim, .ttm-anim *, [data-theme] *, .terminal * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}