/* Named brand themes. Each scope overrides only the spine tokens in tokens.css; * components re-skin automatically because they reference the semantic tokens * (bg-card / border-border / surface-container, mapped in theme.css). Apply with * data-theme="" on a wrapper (or ). The default :root / .dark spine * is the neutral "tangle" theme — also selectable by name as "tangle-dark"; * "-light" scopes are the light variants. */ /* Bridge — the actual re-skin mechanism. Tailwind utilities read the --color-* * layer (theme.css @theme: `bg-card` → var(--color-card) = hsl(var(--card))). * Both --color-* and its --card/--hsl-card source are declared only at :root, so * a descendant [data-theme] that changes --hsl-card never re-substitutes the * :root-computed --color-card the utility consumes — the value is frozen at the * root color (double-indirection inheritance trap). Redeclaring the --color-* * layer directly on any themed element forces each one to recompute from that * element's own --hsl-*. Tokens a theme doesn't override fall back to the * inherited neutral --hsl-* (all defined at :root), so this is always valid. */ [data-theme] { --color-background: hsl(var(--hsl-background)); --color-foreground: hsl(var(--hsl-foreground)); --color-card: hsl(var(--hsl-card)); --color-card-foreground: hsl(var(--hsl-card-foreground)); --color-popover: hsl(var(--hsl-popover)); --color-popover-foreground: hsl(var(--hsl-popover-foreground)); --color-primary: hsl(var(--hsl-primary)); --color-primary-foreground: hsl(var(--hsl-primary-foreground)); --color-secondary: hsl(var(--hsl-secondary)); --color-secondary-foreground: hsl(var(--hsl-secondary-foreground)); --color-muted: hsl(var(--hsl-muted)); --color-muted-foreground: hsl(var(--hsl-muted-foreground)); --color-accent: hsl(var(--hsl-accent)); --color-accent-foreground: hsl(var(--hsl-accent-foreground)); --color-destructive: hsl(var(--hsl-destructive)); --color-destructive-foreground: hsl(var(--hsl-destructive-foreground)); --color-border: hsl(var(--hsl-border)); --color-input: hsl(var(--hsl-muted-foreground)); --color-ring: hsl(var(--hsl-ring)); --color-surface-container-lowest: var(--md3-surface-container-lowest); --color-surface-container-low: var(--md3-surface-container-low); --color-surface-container: var(--md3-surface-container); --color-surface-container-high: var(--md3-surface-container-high); --color-surface-container-highest: var(--md3-surface-container-highest); --color-fg: var(--text-primary); --color-fg-muted: var(--text-muted); --color-fg-dim: var(--text-dim); } /* Light-tuned status palette for the named light scopes. Without this they * inherit the dark :root status colors (bright #f87171/#34D399/…), which fail * WCAG on a light surface — status text + glyphs drop to ~2.5:1. These mirror * tokens.css `[data-theme="light"]` (dark-on-light status text that passes AA). */ [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"] { --surface-success-bg: #ecfdf5; --surface-success-border: #a7f3d0; --surface-success-text: #047857; --surface-warning-bg: #fffbeb; --surface-warning-border: #fde68a; --surface-warning-text: #ab4f09; --surface-danger-bg: #fff1f2; --surface-danger-border: #fecdd3; --surface-danger-text: #b91c1c; --surface-info-bg: #f0f9ff; --surface-info-border: #bae6fd; --surface-info-text: #0369a1; /* Light-tuned interactive tokens — without these the named light scopes * inherit the dark :root values on a light surface: destructive white-on-red * fell to 3.67, and the secondary badge inherited near-white foreground (~1.05). */ --hsl-destructive: 0 72% 41%; --hsl-destructive-foreground: 0 0% 100%; --hsl-secondary-foreground: 0 0% 10%; /* neutral status label inherited var(--text-muted) which was ~3.8:1 on the * light row surface; pin a darker slate that clears AA on light surfaces. */ --surface-neutral-text: #4b5563; } /* Light-tuned syntax highlighting for ALL light scopes (incl. base light). * --syntax-* is defined only in the dark :root (near-white foreground), so on a * light code surface (bg-card ≈ white) code was ~1.2:1 — invisible. Dark-on-light * palette, all ≥4.5:1 on white. */ [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"] { --syntax-foreground: #24292f; --syntax-comment: #57606a; --syntax-keyword: #6d28d9; --syntax-string: #047857; --syntax-function: #1d4ed8; --syntax-number: #92400e; --syntax-meta: #7c3aed; --syntax-variable: #24292f; --syntax-error: #b91c1c; } /* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */ [data-theme="aubergine"] { /* Base lifted off near-black: at ~7% L the 258 hue read black; ~13-20% L with * higher saturation makes the surfaces read unmistakably aubergine-purple. */ --hsl-background: 258 44% 12%; --hsl-foreground: 258 50% 97%; --hsl-card: 258 40% 20%; --hsl-card-foreground: 258 50% 97%; --hsl-popover: 258 40% 24%; --hsl-popover-foreground: 258 50% 97%; --hsl-primary: 250 100% 76%; --hsl-primary-foreground: 258 45% 10%; --hsl-secondary: 258 38% 17%; --hsl-muted: 258 38% 17%; --hsl-muted-foreground: 258 26% 70%; --hsl-accent: 258 40% 24%; --hsl-border: 258 32% 30%; --hsl-input: 258 38% 17%; --hsl-ring: 250 100% 76%; --depth-1: #1a1230; --depth-2: #241a42; --depth-3: #2f2253; --depth-4: #3d2d68; --bg-root: #1a1230; --bg-card: var(--depth-3); --bg-input: var(--depth-2); --md3-surface-container-lowest: #150e28; --md3-surface-container-low: #241a42; --md3-surface-container: #2a1f4c; --md3-surface-container-high: #2f2253; --md3-surface-container-highest: #3d2d68; --md3-outline-variant: #463571; --border-subtle: rgba(183,157,255,0.12); --border-default: rgba(183,157,255,0.22); --border-hover: rgba(183,157,255,0.40); --accent-text: #c4b0ff; --brand-primary: #8f8bff; --brand-glow: #c4b0ff; --text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #a99fc8; --text-dim: #786d99; } [data-theme="aubergine-light"] { --hsl-background: 258 60% 96%; --hsl-foreground: 258 45% 11%; --hsl-card: 0 0% 100%; --hsl-card-foreground: 258 45% 11%; --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 258 45% 11%; --hsl-primary: 258 70% 50%; --hsl-primary-foreground: 0 0% 100%; --hsl-secondary: 258 45% 92%; --hsl-muted: 258 45% 92%; --hsl-muted-foreground: 258 18% 42%; --hsl-accent: 258 45% 92%; --hsl-border: 258 30% 88%; --hsl-input: 258 30% 88%; --hsl-ring: 258 70% 50%; --depth-1: #f4f1fc; --depth-2: #ece6f8; --depth-3: #ffffff; --depth-4: #ffffff; --bg-root: #f4f1fc; --bg-card: #ffffff; --bg-input: #ece6f8; --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #faf8fe; --md3-surface-container: #f4f1fc; --md3-surface-container-high: #ece6f8; --md3-surface-container-highest: #e4dcf4; --md3-outline-variant: #e0d8f0; --border-subtle: rgba(60,32,110,0.10); --border-default: rgba(60,32,110,0.16); --border-hover: rgba(60,32,110,0.30); --accent-text: #6d28d9; --brand-primary: #6d28d9; --brand-glow: #8b5cf6; --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #6c6289; --text-dim: #8a82a6; } /* ───────────────────────── Arena — emerald / green accent ────────────────── */ [data-theme="arena"] { --hsl-background: 160 16% 6%; --hsl-foreground: 150 20% 96%; --hsl-card: 158 14% 12%; --hsl-card-foreground: 150 20% 96%; --hsl-popover: 158 13% 16%; --hsl-popover-foreground: 150 20% 96%; --hsl-primary: 160 84% 39%; --hsl-primary-foreground: 160 60% 8%; --hsl-secondary: 158 12% 12%; --hsl-muted: 158 12% 12%; --hsl-muted-foreground: 152 12% 62%; --hsl-accent: 158 14% 14%; --hsl-border: 158 14% 18%; --hsl-input: 158 12% 12%; --hsl-ring: 160 84% 45%; --depth-1: #0a0f0c; --depth-2: #131b16; --depth-3: #1b261f; --depth-4: #233328; --bg-root: #0a0f0c; --bg-card: var(--depth-3); --bg-input: var(--depth-2); --md3-surface-container-lowest: #070b08; --md3-surface-container-low: #131b16; --md3-surface-container: #182019; --md3-surface-container-high: #1b261f; --md3-surface-container-highest: #233328; --md3-outline-variant: #2a3a31; --border-subtle: rgba(52,211,153,0.10); --border-default: rgba(52,211,153,0.18); --border-hover: rgba(52,211,153,0.32); --accent-text: #34d399; --brand-primary: #10b981; --brand-glow: #34d399; --text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #5f8472; } [data-theme="arena-light"] { --hsl-background: 150 30% 96%; --hsl-foreground: 158 30% 10%; --hsl-card: 0 0% 100%; --hsl-card-foreground: 158 30% 10%; --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 158 30% 10%; --hsl-primary: 160 84% 27%; --hsl-primary-foreground: 0 0% 100%; --hsl-secondary: 150 25% 92%; --hsl-muted: 150 25% 92%; --hsl-muted-foreground: 158 14% 40%; --hsl-accent: 150 25% 92%; --hsl-border: 150 20% 86%; --hsl-input: 150 20% 86%; --hsl-ring: 160 84% 30%; --depth-1: #f0f6f2; --depth-2: #e6f0ea; --depth-3: #ffffff; --depth-4: #ffffff; --bg-root: #f0f6f2; --bg-card: #ffffff; --bg-input: #e6f0ea; --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f6fbf8; --md3-surface-container: #f0f6f2; --md3-surface-container-high: #e6f0ea; --md3-surface-container-highest: #dcebe2; --md3-outline-variant: #d7e8de; --border-subtle: rgba(6,95,70,0.10); --border-default: rgba(6,95,70,0.16); --border-hover: rgba(6,95,70,0.30); --accent-text: #047857; --brand-primary: #059669; --brand-glow: #10b981; --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699; } /* ───────────────────────── Tangle (neutral) — the canonical pair ──────────── */ /* tangle-dark names the default :root/.dark spine explicitly — the values mirror * tokens.css exactly (pinned in named-themes.test.ts). The named scope matters the * moment the attribute would NOT resolve to :root: a dark island inside a * light-named wrapper inherits the light --hsl-* without it, and a theme picker * switching between named themes needs a `tangle-dark` that actually selects. Same * indigo hue family as tangle-light (~239-246), held to the dark discipline — * graphite-indigo neutrals, elevation by lightening, the fill indigo that carries * white (7.4:1) with the bright indigo reserved for accent text. The foreground * and destructive redeclares equal :root standalone, but the block must be * self-sufficient: in the island nesting an omitted token inherits the WRAPPER's * light value (near-black secondary text on the dark secondary measured ~1.5:1). * Status tokens are deliberately not redeclared: the :root dark status palette is * already dark-tuned, same as aubergine/arena. */ [data-theme="tangle-dark"] { --hsl-background: 240 24% 11%; --hsl-foreground: 225 22% 91%; --hsl-card: 238 20% 22%; --hsl-card-foreground: 225 22% 91%; --hsl-popover: 239 22% 25%; --hsl-popover-foreground: 225 22% 91%; --hsl-primary: 246 54% 51%; --hsl-primary-foreground: 0 0% 100%; --hsl-secondary: 239 22% 25%; --hsl-secondary-foreground: 225 22% 91%; --hsl-muted: 239 22% 25%; --hsl-muted-foreground: 234 16% 74%; --hsl-accent: 239 22% 25%; --hsl-accent-foreground: 225 22% 91%; --hsl-destructive: 348 74% 48%; --hsl-destructive-foreground: 0 0% 100%; --hsl-border: 236 20% 35%; --hsl-input: 240 24% 15%; --hsl-ring: 233 100% 87%; --depth-1: #151523; --depth-2: #2d2e43; --depth-3: #32324e; --depth-4: #393957; --bg-root: #151523; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input)); --md3-surface-container-lowest: #0f0f1a; --md3-surface-container-low: #222235; --md3-surface-container: #2d2e43; --md3-surface-container-high: #32324e; --md3-surface-container-highest: #393957; --md3-outline-variant: #474a6b; --border-subtle: rgba(165, 180, 252, 0.10); --border-default: rgba(165, 180, 252, 0.16); --border-hover: rgba(165, 180, 252, 0.28); --accent-text: #A5B4FC; --brand-primary: #7C6CF6; --brand-glow: #A5AAFC; --text-primary: #e3e6ed; --text-secondary: #c2c7d4; --text-muted: #b2b4c7; --text-dim: #9ea5b9; } /* Its light mode. */ [data-theme="tangle-light"] { --hsl-background: 240 33% 98%; --hsl-foreground: 245 32% 14%; --hsl-card: 0 0% 100%; --hsl-card-foreground: 245 32% 14%; --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 245 32% 14%; --hsl-primary: 239 84% 60%; --hsl-primary-foreground: 0 0% 100%; --hsl-secondary: 240 30% 95%; --hsl-muted: 240 28% 95%; --hsl-muted-foreground: 240 8% 42%; --hsl-accent: 240 30% 95%; --hsl-border: 240 20% 90%; --hsl-input: 240 20% 90%; --hsl-ring: 239 84% 60%; --depth-1: #f4f4f9; --depth-2: #edecf4; --depth-3: #ffffff; --depth-4: #ffffff; --bg-root: #f4f4f9; --bg-card: #ffffff; --bg-input: #edecf4; --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f8f8fc; --md3-surface-container: #f4f4f9; --md3-surface-container-high: #edecf4; --md3-surface-container-highest: #e5e4ee; --md3-outline-variant: #e2e1ec; --border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14); --border-hover: rgba(20,20,40,0.26); --accent-text: #4f46e5; --brand-primary: #6366f1; --brand-glow: #818cf8; --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #6a6680; --text-dim: #9490a6; } /* ───────────────────── Intelligence — violet surface ramp ──────────────────── * A violet retint of the surface ladder (hue ~260-265, saturation tapering as * lightness rises). The brand indigo primary / ring / accent-text are * deliberately NOT overridden: the accent stays Tangle, only the surfaces carry * the product's identity. * * Apply `data-theme="intelligence"` on alongside the `.dark` class. * The selector REQUIRES `.dark` rather than trusting the consumer to swap the * attribute on every mode change: a violet dark ramp left standing over a light * page would repaint every surface. Dark-only is the contract, so the selector — * not the caller — enforces it. There is deliberately no `-light` variant; * light falls through to brand's canonical light spine. */ .dark[data-theme="intelligence"] { --md3-surface: #0d0a10; --md3-surface-dim: #0a080d; --md3-surface-bright: #2e2936; --md3-surface-container-lowest: #070509; --md3-surface-container-low: #100d15; --md3-surface-container: #14111a; --md3-surface-container-high: #1b1821; --md3-surface-container-highest: #24202b; --md3-surface-variant: #24202b; --md3-on-surface-variant: #aaa6bb; --hsl-background: 262 24% 5%; --hsl-card: 262 19% 11%; --hsl-popover: 260 16% 13%; --hsl-secondary: 262 15% 18%; --hsl-muted: 262 17% 15%; --hsl-muted-foreground: 255 12% 62%; --hsl-accent: 262 15% 20%; --hsl-border: 262 12% 28%; --hsl-input: 260 14% 16%; /* seated a touch deeper than the canvas so the panel reads as a base plane */ --sidebar-background: 264 26% 4%; --sidebar-accent: 262 16% 16%; --sidebar-border: 262 12% 13%; --depth-1: #0e0b13; --depth-2: #16131c; --depth-3: #201c28; --depth-4: #2a2533; --bg-elevated: hsl(262 17% 15%); --bg-section: hsl(262 22% 7%); --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent), radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent), linear-gradient(180deg, var(--depth-1), #0d0a12 100%); --border-subtle: rgba(120, 108, 158, 0.1); --border-default: rgba(120, 108, 158, 0.18); --border-hover: rgba(120, 108, 158, 0.28); }