@grackle-ai/web-components 0.107.2

package/src/styles/theme.scss

@@ -0,0 +1,1102 @@
+@use 'sass:map';
+
+// ============================================================================
+// Design Tokens — Grackle Web UI
+// ============================================================================
+// Multi-theme token system.  :root = glassmorphism. Default theme is Grackle (grackle-dark/grackle-light).
+// [data-theme="grackle-light"] and [data-theme="grackle-dark"] are the brand theme.
+// Additional themes use the define-theme mixin for compact palette definitions.
+// Component styles consume these via var(--token-name).
+// ============================================================================
+
+// =============================================================================
+// Theme Generator Mixin
+// =============================================================================
+// Produces all CSS custom properties from a compact SCSS map (~30 seed values).
+// Derived variants (-dim, -fg, -subtle, -border) are auto-generated via
+// color-mix().  To add a new theme, define a $palette map and call:
+//   [data-theme="my-theme"] { @include define-theme($my-palette); }
+// =============================================================================
+
+@mixin define-theme($p) {
+  // Backgrounds
+  --bg-base: #{map.get($p, 'bg-base')};
+  --bg-surface: #{map.get($p, 'bg-surface')};
+  --bg-elevated: #{map.get($p, 'bg-elevated')};
+  --bg-overlay: #{map.get($p, 'bg-overlay')};
+  --bg-input: #{map.get($p, 'bg-input')};
+  --bg-inset: #{map.get($p, 'bg-inset')};
+
+  // Glass effects
+  --glass-blur: #{map.get($p, 'glass-blur') or 0px};
+  --glass-blur-card: #{map.get($p, 'glass-blur-card') or 0px};
+  --glass-blur-inset: #{map.get($p, 'glass-blur-inset') or 0px};
+  --glass-border: #{map.get($p, 'glass-border')};
+  --glass-border-hover: #{map.get($p, 'glass-border-hover')};
+  --glass-highlight: #{map.get($p, 'glass-highlight') or transparent};
+  --glass-highlight-strong: #{map.get($p, 'glass-highlight-strong') or transparent};
+  --glass-inner-glow: #{map.get($p, 'glass-inner-glow') or 0};
+
+  // Text
+  --text-primary: #{map.get($p, 'text-primary')};
+  --text-secondary: #{map.get($p, 'text-secondary')};
+  --text-tertiary: #{map.get($p, 'text-tertiary')};
+  --text-disabled: #{map.get($p, 'text-disabled')};
+
+  // Accent base colors
+  $green: map.get($p, 'green');
+  $red: map.get($p, 'red');
+  $yellow: map.get($p, 'yellow');
+  $blue: map.get($p, 'blue');
+  $purple: map.get($p, 'purple');
+  $cyan: map.get($p, 'cyan');
+
+  --accent-green: #{$green};
+  --accent-green-dim: color-mix(in srgb, #{$green} 15%, transparent);
+  --accent-green-subtle: color-mix(in srgb, #{$green} 8%, transparent);
+  --accent-green-focus: color-mix(in srgb, #{$green} 12%, transparent);
+  --accent-green-selection: color-mix(in srgb, #{$green} 25%, transparent);
+  --accent-red: #{$red};
+  --accent-red-dim: color-mix(in srgb, #{$red} 15%, transparent);
+  --accent-yellow: #{$yellow};
+  --accent-yellow-dim: color-mix(in srgb, #{$yellow} 15%, transparent);
+  --accent-blue: #{$blue};
+  --accent-blue-dim: color-mix(in srgb, #{$blue} 15%, transparent);
+  --accent-purple: #{$purple};
+  --accent-purple-dim: color-mix(in srgb, #{$purple} 15%, transparent);
+  --accent-cyan: #{$cyan};
+  --accent-cyan-dim: color-mix(in srgb, #{$cyan} 15%, transparent);
+
+  // Accent foreground variants (defaults to base if not provided)
+  --accent-red-fg: #{map.get($p, 'red-fg') or $red};
+  --accent-yellow-fg: #{map.get($p, 'yellow-fg') or $yellow};
+  --accent-blue-fg: #{map.get($p, 'blue-fg') or $blue};
+  --accent-green-fg: #{map.get($p, 'green-fg') or $green};
+  --accent-purple-fg: #{map.get($p, 'purple-fg') or $purple};
+  --accent-cyan-fg: #{map.get($p, 'cyan-fg') or $cyan};
+
+  // Accent border variants (30% opacity for callout/badge borders)
+  --accent-green-border: color-mix(in srgb, #{$green} 30%, transparent);
+  --accent-red-border: color-mix(in srgb, #{$red} 30%, transparent);
+  --accent-yellow-border: color-mix(in srgb, #{$yellow} 30%, transparent);
+  --accent-blue-border: color-mix(in srgb, #{$blue} 30%, transparent);
+
+  // Borders
+  --border-primary: color-mix(in srgb, #{$green} 18%, transparent);
+  --border-subtle: #{map.get($p, 'border-subtle')};
+  --border-input: #{map.get($p, 'border-input')};
+
+  // Ring (focus outline)
+  --ring: #{$green};
+  --ring-alpha: color-mix(in srgb, #{$green} 24%, transparent);
+
+  // Card highlight
+  --highlight-top: #{map.get($p, 'highlight-top') or none};
+
+  // Border radii (optional overrides — falls through to :root if omitted)
+  @if map.has-key($p, 'radius-sm') {
+    --radius-sm: #{map.get($p, 'radius-sm')};
+  }
+  @if map.has-key($p, 'radius-md') {
+    --radius-md: #{map.get($p, 'radius-md')};
+  }
+  @if map.has-key($p, 'radius-lg') {
+    --radius-lg: #{map.get($p, 'radius-lg')};
+  }
+  @if map.has-key($p, 'radius-xl') {
+    --radius-xl: #{map.get($p, 'radius-xl')};
+  }
+
+  // Shadows
+  --shadow-xs: #{map.get($p, 'shadow-xs')};
+  --shadow-sm: #{map.get($p, 'shadow-sm')};
+  --shadow-md: #{map.get($p, 'shadow-md')};
+  --shadow-lg: #{map.get($p, 'shadow-lg')};
+  --shadow-glow-green: #{map.get($p, 'shadow-glow-green') or none};
+  --shadow-glow-red: #{map.get($p, 'shadow-glow-red') or none};
+
+  // Font
+  --font-ui: #{map.get($p, 'font-ui')};
+
+  // Noise texture overlay opacity
+  --noise-opacity: #{map.get($p, 'noise-opacity') or 0};
+
+  // Syntax highlighting
+  --code-comment: #{map.get($p, 'code-comment')};
+  --code-keyword: #{map.get($p, 'code-keyword')};
+  --code-function: #{map.get($p, 'code-function')};
+  --code-string: #{map.get($p, 'code-string')};
+  --code-number: #{map.get($p, 'code-number')};
+  --code-class: #{map.get($p, 'code-class')};
+  --code-tag: #{map.get($p, 'code-tag')};
+  --code-deleted: #{map.get($p, 'code-deleted')};
+  --code-inserted: #{map.get($p, 'code-inserted')};
+  --code-punctuation: #{map.get($p, 'code-punctuation')};
+}
+
+// =============================================================================
+// Glassmorphism Theme (Default) — :root
+// =============================================================================
+
+:root {
+  // ---------------------------------------------------------------------------
+  // Backgrounds — Glassmorphism (semi-transparent for backdrop-filter)
+  // ---------------------------------------------------------------------------
+  --bg-base: #0a0c14;
+  --bg-surface: rgba(16, 20, 34, 0.82);
+  --bg-elevated: rgba(24, 30, 52, 0.72);
+  --bg-overlay: rgba(15, 52, 96, 0.35);
+  --bg-input: rgba(20, 26, 46, 0.85);
+  --bg-inset: rgba(10, 14, 28, 0.55);
+
+  // ---------------------------------------------------------------------------
+  // Glass effects (active in default theme, zeroed in light/dark)
+  // ---------------------------------------------------------------------------
+  --glass-blur: 16px;
+  --glass-blur-card: 8px;
+  --glass-blur-inset: 4px;
+  --glass-border: rgba(255, 255, 255, 0.10);
+  --glass-border-hover: rgba(255, 255, 255, 0.16);
+  --glass-highlight: rgba(255, 255, 255, 0.03);
+  --glass-highlight-strong: rgba(255, 255, 255, 0.06);
+  --glass-inner-glow: 1;
+
+  // ---------------------------------------------------------------------------
+  // Text
+  // ---------------------------------------------------------------------------
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --text-tertiary: #6b7a8d;
+  --text-disabled: #475569;
+
+  // ---------------------------------------------------------------------------
+  // Accent Colors
+  // ---------------------------------------------------------------------------
+  --accent-green: #4ecca3;
+  --accent-green-dim: rgba(78, 204, 163, 0.18);
+  --accent-green-subtle: rgba(78, 204, 163, 0.08);
+  --accent-green-focus: rgba(78, 204, 163, 0.1);
+  --accent-green-selection: rgba(78, 204, 163, 0.25);
+
+  --accent-red: #e94560;
+  --accent-red-dim: rgba(233, 69, 96, 0.18);
+
+  --accent-yellow: #f0c040;
+  --accent-yellow-dim: rgba(240, 192, 64, 0.18);
+
+  --accent-blue: #70a1ff;
+  --accent-blue-dim: rgba(112, 161, 255, 0.18);
+
+  --accent-purple: #a855f7;
+  --accent-purple-dim: rgba(168, 85, 247, 0.18);
+
+  --accent-cyan: #22d3ee;
+  --accent-cyan-dim: rgba(34, 211, 238, 0.18);
+
+  // Semantic foreground variants
+  --accent-red-fg: #e94560;
+  --accent-yellow-fg: #f0c040;
+  --accent-blue-fg: #70a1ff;
+  --accent-green-fg: #4ecca3;
+  --accent-purple-fg: #a855f7;
+  --accent-cyan-fg: #22d3ee;
+
+  // Accent border variants (30% for callout/badge borders)
+  --accent-green-border: rgba(78, 204, 163, 0.30);
+  --accent-red-border: rgba(233, 69, 96, 0.30);
+  --accent-yellow-border: rgba(240, 192, 64, 0.30);
+  --accent-blue-border: rgba(112, 161, 255, 0.30);
+
+  // ---------------------------------------------------------------------------
+  // Borders
+  // ---------------------------------------------------------------------------
+  --border-primary: rgba(78, 204, 163, 0.18);
+  --border-subtle: rgba(255, 255, 255, 0.10);
+  --border-input: rgba(255, 255, 255, 0.14);
+
+  // ---------------------------------------------------------------------------
+  // Ring (focus outline)
+  // ---------------------------------------------------------------------------
+  --ring: #4ecca3;
+  --ring-alpha: rgba(78, 204, 163, 0.24);
+
+  // ---------------------------------------------------------------------------
+  // Card highlight
+  // ---------------------------------------------------------------------------
+  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
+
+  // ---------------------------------------------------------------------------
+  // Spacing
+  // ---------------------------------------------------------------------------
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+
+  // ---------------------------------------------------------------------------
+  // Border Radii
+  // ---------------------------------------------------------------------------
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  // ---------------------------------------------------------------------------
+  // Shadows
+  // ---------------------------------------------------------------------------
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --shadow-glow-green: 0 0 16px rgba(78, 204, 163, 0.15);
+  --shadow-glow-red: 0 0 16px rgba(233, 69, 96, 0.15);
+
+  // ---------------------------------------------------------------------------
+  // Typography
+  // ---------------------------------------------------------------------------
+  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  --font-ui: var(--font-mono);
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-md: 13px;
+  --font-size-lg: 15px;
+  --font-size-xl: 18px;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+  --line-height: 1.5;
+
+  // ---------------------------------------------------------------------------
+  // Transitions
+  // ---------------------------------------------------------------------------
+  --transition-fast: 150ms ease;
+  --transition-base: 250ms ease;
+  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  // ---------------------------------------------------------------------------
+  // Border width (1px default, 2px in brutalist themes)
+  // ---------------------------------------------------------------------------
+  --border-width: 1px;
+
+  // ---------------------------------------------------------------------------
+  // Noise texture overlay opacity (0 in glass, subtle in T3 themes)
+  // ---------------------------------------------------------------------------
+  --noise-opacity: 0;
+
+  // ---------------------------------------------------------------------------
+  // Syntax highlighting — Glass / Dark
+  // ---------------------------------------------------------------------------
+  --code-comment: #6b7a8d;
+  --code-keyword: #4ecca3;
+  --code-function: #70a1ff;
+  --code-string: #22d3ee;
+  --code-number: #a855f7;
+  --code-class: #f0c040;
+  --code-tag: #4ecca3;
+  --code-deleted: #e94560;
+  --code-inserted: #4ecca3;
+  --code-punctuation: #94a3b8;
+}
+
+// =============================================================================
+// Grackle Light — Brand theme (light variant) — purple accent
+// =============================================================================
+
+[data-theme="grackle-light"] {
+  color-scheme: light;
+
+  // Disable glass effects
+  --glass-blur: 0px;
+  --glass-blur-card: 0px;
+  --glass-blur-inset: 0px;
+  --glass-border: rgba(90, 60, 150, 0.10);
+  --glass-border-hover: rgba(90, 60, 150, 0.16);
+  --glass-highlight: transparent;
+  --glass-highlight-strong: transparent;
+  --glass-inner-glow: 0;
+
+  // Backgrounds — white base, cards are tinted grey panels
+  --bg-base: #faf9fc;
+  --bg-surface: #f0edf5;
+  --bg-elevated: #f4f2f7;
+  --bg-overlay: rgba(124, 58, 237, 0.04);
+  --bg-input: #ffffff;
+  --bg-inset: #e8e5ef;
+
+  // Text — slightly deeper for contrast against off-white
+  --text-primary: #1a1528;
+  --text-secondary: #5e5775;
+  --text-tertiary: #908aa0;
+  --text-disabled: #c5c1cf;
+
+  // Accents — purple brand accent
+  --accent-green: #7c3aed;
+  --accent-green-dim: rgba(124, 58, 237, 0.10);
+  --accent-green-subtle: rgba(124, 58, 237, 0.06);
+  --accent-green-focus: rgba(124, 58, 237, 0.12);
+  --accent-green-selection: rgba(124, 58, 237, 0.20);
+  --accent-red: #ef4444;
+  --accent-red-dim: rgba(239, 68, 68, 0.10);
+  --accent-yellow: #f59e0b;
+  --accent-yellow-dim: rgba(245, 158, 11, 0.10);
+  --accent-blue: #3b82f6;
+  --accent-blue-dim: rgba(59, 130, 246, 0.10);
+  --accent-purple: #8b5cf6;
+  --accent-purple-dim: rgba(139, 92, 246, 0.10);
+  --accent-cyan: #06b6d4;
+  --accent-cyan-dim: rgba(6, 182, 212, 0.10);
+
+  --accent-red-fg: #b91c1c;
+  --accent-yellow-fg: #b45309;
+  --accent-blue-fg: #1d4ed8;
+  --accent-green-fg: #6d28d9;
+  --accent-purple-fg: #6d28d9;
+  --accent-cyan-fg: #0e7490;
+
+  // Accent border variants
+  --accent-green-border: rgba(124, 58, 237, 0.30);
+  --accent-red-border: rgba(239, 68, 68, 0.30);
+  --accent-yellow-border: rgba(245, 158, 11, 0.30);
+  --accent-blue-border: rgba(59, 130, 246, 0.30);
+
+  // Borders — purple-tinted
+  --border-primary: rgba(124, 58, 237, 0.18);
+  --border-subtle: rgba(90, 60, 150, 0.10);
+  --border-input: rgba(90, 60, 150, 0.16);
+
+  // Ring
+  --ring: #7c3aed;
+  --ring-alpha: rgba(124, 58, 237, 0.24);
+
+  // Highlight
+  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+  // Radii (slightly smaller for T3)
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+
+  // Shadows — purple-tinted for cohesion
+  --shadow-xs: 0 1px 2px rgba(90, 60, 150, 0.06);
+  --shadow-sm: 0 1px 3px rgba(90, 60, 150, 0.10), 0 1px 2px rgba(90, 60, 150, 0.06);
+  --shadow-md: 0 4px 6px rgba(90, 60, 150, 0.08), 0 2px 4px rgba(90, 60, 150, 0.06);
+  --shadow-lg: 0 10px 15px rgba(90, 60, 150, 0.10), 0 4px 6px rgba(90, 60, 150, 0.05);
+  --shadow-glow-green: none;
+  --shadow-glow-red: none;
+
+  // Font — sans-serif for T3 themes
+  --font-ui: var(--font-sans);
+
+  // Noise texture
+  --noise-opacity: 0.02;
+
+  // Syntax highlighting
+  --code-comment: #6b7280;
+  --code-keyword: #7c3aed;
+  --code-function: #2563eb;
+  --code-string: #0891b2;
+  --code-number: #7c3aed;
+  --code-class: #d97706;
+  --code-tag: #7c3aed;
+  --code-deleted: #ef4444;
+  --code-inserted: #10b981;
+  --code-punctuation: #6b7280;
+}
+
+// =============================================================================
+// Grackle Dark — Brand theme (dark variant) — purple accent
+// =============================================================================
+
+[data-theme="grackle-dark"] {
+  color-scheme: dark;
+
+  // Disable glass effects
+  --glass-blur: 0px;
+  --glass-blur-card: 0px;
+  --glass-blur-inset: 0px;
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-border-hover: rgba(255, 255, 255, 0.10);
+  --glass-highlight: transparent;
+  --glass-highlight-strong: transparent;
+  --glass-inner-glow: 0;
+
+  // Backgrounds
+  --bg-base: #0e1218;
+  --bg-surface: #161b22;
+  --bg-elevated: #1c2129;
+  --bg-overlay: rgba(255, 255, 255, 0.04);
+  --bg-input: #161b22;
+  --bg-inset: #0e1218;
+
+  // Text
+  --text-primary: #e5e7eb;
+  --text-secondary: #9ca3af;
+  --text-tertiary: #6b7280;
+  --text-disabled: #4b5563;
+
+  // Accents — purple brand accent
+  --accent-green: #8b5cf6;
+  --accent-green-dim: rgba(139, 92, 246, 0.15);
+  --accent-green-subtle: rgba(139, 92, 246, 0.08);
+  --accent-green-focus: rgba(139, 92, 246, 0.15);
+  --accent-green-selection: rgba(139, 92, 246, 0.25);
+  --accent-red: #f87171;
+  --accent-red-dim: rgba(248, 113, 113, 0.15);
+  --accent-yellow: #fbbf24;
+  --accent-yellow-dim: rgba(251, 191, 36, 0.15);
+  --accent-blue: #60a5fa;
+  --accent-blue-dim: rgba(96, 165, 250, 0.15);
+  --accent-purple: #a78bfa;
+  --accent-purple-dim: rgba(167, 139, 250, 0.15);
+  --accent-cyan: #22d3ee;
+  --accent-cyan-dim: rgba(34, 211, 238, 0.15);
+
+  --accent-red-fg: #fca5a5;
+  --accent-yellow-fg: #fcd34d;
+  --accent-blue-fg: #93c5fd;
+  --accent-green-fg: #c4b5fd;
+  --accent-purple-fg: #c4b5fd;
+  --accent-cyan-fg: #67e8f9;
+
+  // Accent border variants
+  --accent-green-border: rgba(139, 92, 246, 0.30);
+  --accent-red-border: rgba(248, 113, 113, 0.30);
+  --accent-yellow-border: rgba(251, 191, 36, 0.30);
+  --accent-blue-border: rgba(96, 165, 250, 0.30);
+
+  // Borders — purple-tinted
+  --border-primary: rgba(139, 92, 246, 0.18);
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-input: rgba(255, 255, 255, 0.10);
+
+  // Ring
+  --ring: #8b5cf6;
+  --ring-alpha: rgba(139, 92, 246, 0.24);
+
+  // Highlight
+  --highlight-top: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
+
+  // Radii
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+
+  // Shadows
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
+  --shadow-glow-green: none;
+  --shadow-glow-red: none;
+
+  // Font
+  --font-ui: var(--font-sans);
+
+  // Noise texture
+  --noise-opacity: 0.03;
+
+  // Syntax highlighting
+  --code-comment: #9ca3af;
+  --code-keyword: #8b5cf6;
+  --code-function: #60a5fa;
+  --code-string: #22d3ee;
+  --code-number: #a78bfa;
+  --code-class: #fbbf24;
+  --code-tag: #8b5cf6;
+  --code-deleted: #f87171;
+  --code-inserted: #34d399;
+  --code-punctuation: #9ca3af;
+}
+
+// =============================================================================
+// Matrix — CRT / Retro Terminal
+// =============================================================================
+
+$matrix-palette: (
+  'bg-base': #050505,
+  'bg-surface': #0a0f0a,
+  'bg-elevated': #0f160f,
+  'bg-overlay': rgba(0, 255, 65, 0.06),
+  'bg-input': #0a0f0a,
+  'bg-inset': #030303,
+
+  'glass-border': rgba(0, 255, 65, 0.12),
+  'glass-border-hover': rgba(0, 255, 65, 0.20),
+
+  'text-primary': #33ff77,
+  'text-secondary': #22bb55,
+  'text-tertiary': #1a7a33,
+  'text-disabled': #0d4d1a,
+
+  'green': #00ff41,
+  'red': #ff3333,
+  'yellow': #ffb000,
+  'blue': #00bfff,
+  'purple': #b967ff,
+  'cyan': #00ffcc,
+
+  'border-subtle': rgba(0, 255, 65, 0.10),
+  'border-input': rgba(0, 255, 65, 0.16),
+
+  'highlight-top': inset 0 1px 0 0 rgba(0, 255, 65, 0.04),
+
+  'radius-sm': 0px,
+  'radius-md': 0px,
+  'radius-lg': 0px,
+  'radius-xl': 0px,
+
+  'shadow-xs': 0 0 2px rgba(0, 255, 65, 0.15),
+  'shadow-sm': 0 0 4px rgba(0, 255, 65, 0.15),
+  'shadow-md': 0 0 8px rgba(0, 255, 65, 0.12),
+  'shadow-lg': 0 0 16px rgba(0, 255, 65, 0.20),
+  'shadow-glow-green': 0 0 20px rgba(0, 255, 65, 0.25),
+  'shadow-glow-red': 0 0 20px rgba(255, 51, 51, 0.25),
+
+  'font-ui': var(--font-mono),
+
+  'code-comment': #008f11,
+  'code-keyword': #00ff41,
+  'code-function': #00bfff,
+  'code-string': #ffb000,
+  'code-number': #b967ff,
+  'code-class': #ffb000,
+  'code-tag': #00ff41,
+  'code-deleted': #ff3333,
+  'code-inserted': #00ff41,
+  'code-punctuation': #00cc33,
+);
+
+[data-theme="matrix"] {
+  color-scheme: dark;
+  @include define-theme($matrix-palette);
+}
+
+// =============================================================================
+// Neubrutalism — thick borders, raw colors, bold type
+// =============================================================================
+
+$brutalist-palette: (
+  'bg-base': #f5f0e8,
+  'bg-surface': #ffffff,
+  'bg-elevated': #ffffff,
+  'bg-overlay': rgba(0, 0, 0, 0.06),
+  'bg-input': #ffffff,
+  'bg-inset': #ede8df,
+
+  'glass-border': #1a1a1a,
+  'glass-border-hover': #000000,
+
+  'text-primary': #1a1a1a,
+  'text-secondary': #4a4a4a,
+  'text-tertiary': #7a7a7a,
+  'text-disabled': #b0b0b0,
+
+  'green': #7ed957,
+  'red': #ff5757,
+  'yellow': #ffde59,
+  'blue': #5ce1e6,
+  'purple': #cb6ce6,
+  'cyan': #38b6ff,
+
+  'border-subtle': #1a1a1a,
+  'border-input': #1a1a1a,
+
+  'highlight-top': none,
+
+  'radius-sm': 4px,
+  'radius-md': 4px,
+  'radius-lg': 6px,
+  'radius-xl': 8px,
+
+  'shadow-xs': 2px 2px 0px #1a1a1a,
+  'shadow-sm': 3px 3px 0px #1a1a1a,
+  'shadow-md': 4px 4px 0px #1a1a1a,
+  'shadow-lg': 6px 6px 0px #1a1a1a,
+
+  'font-ui': var(--font-sans),
+  'noise-opacity': 0,
+
+  'code-comment': #7a7a7a,
+  'code-keyword': #ff5757,
+  'code-function': #5ce1e6,
+  'code-string': #7ed957,
+  'code-number': #cb6ce6,
+  'code-class': #ffde59,
+  'code-tag': #ff5757,
+  'code-deleted': #ff5757,
+  'code-inserted': #7ed957,
+  'code-punctuation': #4a4a4a,
+);
+
+[data-theme="brutalist-light"] {
+  color-scheme: light;
+  @include define-theme($brutalist-palette);
+  --border-width: 2px;
+
+  // Press-down effect on interactive elements
+  button:active,
+  [role="button"]:active {
+    --shadow-xs: 1px 1px 0px #1a1a1a;
+    --shadow-sm: 1px 1px 0px #1a1a1a;
+    transform: translate(1px, 1px);
+  }
+}
+
+// =============================================================================
+// Neubrutalism Dark — same raw energy, inverted
+// =============================================================================
+
+$brutalist-dark-palette: (
+  'bg-base': #1a1a1a,
+  'bg-surface': #252525,
+  'bg-elevated': #2f2f2f,
+  'bg-overlay': rgba(255, 255, 255, 0.06),
+  'bg-input': #252525,
+  'bg-inset': #111111,
+
+  'glass-border': #e0e0e0,
+  'glass-border-hover': #ffffff,
+
+  'text-primary': #f0f0f0,
+  'text-secondary': #b0b0b0,
+  'text-tertiary': #808080,
+  'text-disabled': #505050,
+
+  'green': #7ed957,
+  'red': #ff5757,
+  'yellow': #ffde59,
+  'blue': #5ce1e6,
+  'purple': #cb6ce6,
+  'cyan': #38b6ff,
+
+  'border-subtle': #e0e0e0,
+  'border-input': #e0e0e0,
+
+  'highlight-top': none,
+
+  'radius-sm': 4px,
+  'radius-md': 4px,
+  'radius-lg': 6px,
+  'radius-xl': 8px,
+
+  'shadow-xs': 2px 2px 0px #e0e0e0,
+  'shadow-sm': 3px 3px 0px #e0e0e0,
+  'shadow-md': 4px 4px 0px #e0e0e0,
+  'shadow-lg': 6px 6px 0px #e0e0e0,
+
+  'font-ui': var(--font-sans),
+  'noise-opacity': 0,
+
+  'code-comment': #808080,
+  'code-keyword': #ff5757,
+  'code-function': #5ce1e6,
+  'code-string': #7ed957,
+  'code-number': #cb6ce6,
+  'code-class': #ffde59,
+  'code-tag': #ff5757,
+  'code-deleted': #ff5757,
+  'code-inserted': #7ed957,
+  'code-punctuation': #b0b0b0,
+);
+
+[data-theme="brutalist-dark"] {
+  color-scheme: dark;
+  @include define-theme($brutalist-dark-palette);
+  --border-width: 2px;
+
+  // Press-down effect on interactive elements
+  button:active,
+  [role="button"]:active {
+    --shadow-xs: 1px 1px 0px #e0e0e0;
+    --shadow-sm: 1px 1px 0px #e0e0e0;
+    transform: translate(1px, 1px);
+  }
+}
+
+// =============================================================================
+// Monokai — Classic warm editor palette
+// =============================================================================
+
+$monokai-palette: (
+  'bg-base': #272822,
+  'bg-surface': #2d2e27,
+  'bg-elevated': #3e3d32,
+  'bg-overlay': rgba(255, 255, 255, 0.05),
+  'bg-input': #2d2e27,
+  'bg-inset': #1e1f1a,
+
+  'glass-border': rgba(255, 255, 255, 0.08),
+  'glass-border-hover': rgba(255, 255, 255, 0.14),
+
+  'text-primary': #f8f8f2,
+  'text-secondary': #a6a28c,
+  'text-tertiary': #75715e,
+  'text-disabled': #4b4a3e,
+
+  'green': #a6e22e,
+  'red': #f92672,
+  'yellow': #e6db74,
+  'blue': #66d9ef,
+  'purple': #ae81ff,
+  'cyan': #66d9ef,
+
+  'border-subtle': rgba(255, 255, 255, 0.06),
+  'border-input': rgba(255, 255, 255, 0.10),
+
+  'highlight-top': inset 0 1px 0 rgba(255, 255, 255, 0.04),
+
+  'radius-md': 8px,
+  'radius-lg': 10px,
+  'radius-xl': 14px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.3),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.4), // single shadow for SCSS map
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.4),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.5),
+
+  'font-ui': var(--font-mono),
+
+  'code-comment': #75715e,
+  'code-keyword': #f92672,
+  'code-function': #a6e22e,
+  'code-string': #e6db74,
+  'code-number': #ae81ff,
+  'code-class': #66d9ef,
+  'code-tag': #f92672,
+  'code-deleted': #f92672,
+  'code-inserted': #a6e22e,
+  'code-punctuation': #f8f8f2,
+);
+
+[data-theme="monokai-dark"] {
+  color-scheme: dark;
+  @include define-theme($monokai-palette);
+}
+
+// =============================================================================
+// Monokai Light — warm editor palette on a light background
+// =============================================================================
+
+$monokai-light-palette: (
+  'bg-base': #fcfcfa,
+  'bg-surface': #ffffff,
+  'bg-elevated': #ffffff,
+  'bg-overlay': rgba(0, 0, 0, 0.04),
+  'bg-input': #ffffff,
+  'bg-inset': #f0f0ea,
+
+  'glass-border': rgba(0, 0, 0, 0.10),
+  'glass-border-hover': rgba(0, 0, 0, 0.16),
+
+  'text-primary': #2c292d,
+  'text-secondary': #727072,
+  'text-tertiary': #9e9b9e,
+  'text-disabled': #c8c6c8,
+
+  'green': #7a9e1e,
+  'red': #d4185e,
+  'yellow': #b8a510,
+  'blue': #2ba4bf,
+  'purple': #8b5fcf,
+  'cyan': #2ba4bf,
+
+  'border-subtle': rgba(0, 0, 0, 0.08),
+  'border-input': rgba(0, 0, 0, 0.14),
+
+  'highlight-top': inset 0 1px 0 rgba(255, 255, 255, 0.8),
+
+  'radius-md': 8px,
+  'radius-lg': 10px,
+  'radius-xl': 14px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.06),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.10),
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.08),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.10),
+
+  'font-ui': var(--font-mono),
+
+  'code-comment': #9e9b9e,
+  'code-keyword': #d4185e,
+  'code-function': #7a9e1e,
+  'code-string': #b8a510,
+  'code-number': #8b5fcf,
+  'code-class': #2ba4bf,
+  'code-tag': #d4185e,
+  'code-deleted': #d4185e,
+  'code-inserted': #7a9e1e,
+  'code-punctuation': #2c292d,
+);
+
+[data-theme="monokai-light"] {
+  color-scheme: light;
+  @include define-theme($monokai-light-palette);
+}
+
+// =============================================================================
+// Ubuntu — Aubergine terminal palette
+// =============================================================================
+
+$ubuntu-palette: (
+  'bg-base': #300a24,
+  'bg-surface': #3c1130,
+  'bg-elevated': #4e1a3d,
+  'bg-overlay': rgba(255, 255, 255, 0.05),
+  'bg-input': #3c1130,
+  'bg-inset': #240720,
+
+  'glass-border': rgba(255, 255, 255, 0.08),
+  'glass-border-hover': rgba(255, 255, 255, 0.14),
+
+  'text-primary': #eeeeec,
+  'text-secondary': #d3d7cf,
+  'text-tertiary': #888a85,
+  'text-disabled': #555753,
+
+  'green': #8ae234,
+  'red': #ef2929,
+  'yellow': #fce94f,
+  'blue': #729fcf,
+  'purple': #ad7fa8,
+  'cyan': #34e2e2,
+
+  'red-fg': #ef2929,
+  'yellow-fg': #fce94f,
+  'blue-fg': #729fcf,
+  'green-fg': #8ae234,
+  'purple-fg': #ad7fa8,
+  'cyan-fg': #34e2e2,
+
+  'border-subtle': rgba(255, 255, 255, 0.08),
+  'border-input': rgba(255, 255, 255, 0.12),
+
+  'highlight-top': inset 0 1px 0 rgba(255, 255, 255, 0.04),
+
+  'radius-md': 6px,
+  'radius-lg': 8px,
+  'radius-xl': 12px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.3),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.4),
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.4),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.5),
+
+  'font-ui': var(--font-mono),
+
+  'code-comment': #888a85,
+  'code-keyword': #8ae234,
+  'code-function': #729fcf,
+  'code-string': #fce94f,
+  'code-number': #ad7fa8,
+  'code-class': #34e2e2,
+  'code-tag': #8ae234,
+  'code-deleted': #ef2929,
+  'code-inserted': #8ae234,
+  'code-punctuation': #d3d7cf,
+);
+
+[data-theme="ubuntu"] {
+  color-scheme: dark;
+  @include define-theme($ubuntu-palette);
+}
+
+// =============================================================================
+// Sandstone — Warm terracotta accent on dark brown
+// =============================================================================
+
+$sandstone-palette: (
+  'bg-base': #1a1815,
+  'bg-surface': #201d18,
+  'bg-elevated': #2a2620,
+  'bg-overlay': rgba(193, 95, 60, 0.06),
+  'bg-input': #201d18,
+  'bg-inset': #141210,
+
+  'glass-border': rgba(193, 95, 60, 0.14),
+  'glass-border-hover': rgba(193, 95, 60, 0.22),
+
+  'text-primary': #e8e6e3,
+  'text-secondary': #b1ada1,
+  'text-tertiary': #7d796e,
+  'text-disabled': #4a473f,
+
+  'green': #C15F3C,
+  'red': #e85d4a,
+  'yellow': #d4a054,
+  'blue': #6b8afd,
+  'purple': #a78bfa,
+  'cyan': #5fb8c2,
+
+  'green-fg': #d4845f,
+  'red-fg': #f08070,
+  'yellow-fg': #e0b46a,
+  'blue-fg': #8da4fd,
+  'purple-fg': #c4b5fd,
+  'cyan-fg': #7dccd4,
+
+  'border-subtle': rgba(255, 255, 255, 0.06),
+  'border-input': rgba(193, 95, 60, 0.18),
+
+  'highlight-top': inset 0 1px 0 rgba(193, 95, 60, 0.04),
+
+  'radius-md': 8px,
+  'radius-lg': 10px,
+  'radius-xl': 14px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.3),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.4),
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.4),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.5),
+  'shadow-glow-green': 0 0 16px rgba(193, 95, 60, 0.15),
+  'shadow-glow-red': 0 0 16px rgba(232, 93, 74, 0.15),
+
+  'font-ui': var(--font-mono),
+
+  'code-comment': #7d796e,
+  'code-keyword': #C15F3C,
+  'code-function': #6b8afd,
+  'code-string': #5fb8c2,
+  'code-number': #a78bfa,
+  'code-class': #d4a054,
+  'code-tag': #C15F3C,
+  'code-deleted': #e85d4a,
+  'code-inserted': #C15F3C,
+  'code-punctuation': #b1ada1,
+);
+
+[data-theme="sandstone"] {
+  color-scheme: dark;
+  @include define-theme($sandstone-palette);
+}
+
+// =============================================================================
+// Verdigris — Teal accent on charcoal (ChatGPT-inspired)
+// =============================================================================
+
+$verdigris-palette: (
+  'bg-base': #141414,
+  'bg-surface': #1e1e1e,
+  'bg-elevated': #2a2a2a,
+  'bg-overlay': rgba(0, 166, 126, 0.06),
+  'bg-input': #1e1e1e,
+  'bg-inset': #0e0e0e,
+
+  'glass-border': rgba(255, 255, 255, 0.08),
+  'glass-border-hover': rgba(255, 255, 255, 0.14),
+
+  'text-primary': #ececec,
+  'text-secondary': #a1a1a6,
+  'text-tertiary': #6e6e73,
+  'text-disabled': #3e3e42,
+
+  'green': #00a67e,
+  'red': #ef4444,
+  'yellow': #f59e0b,
+  'blue': #3b82f6,
+  'purple': #ab68ff,
+  'cyan': #06b6d4,
+
+  'border-subtle': rgba(255, 255, 255, 0.06),
+  'border-input': rgba(255, 255, 255, 0.12),
+
+  'highlight-top': inset 0 1px 0 rgba(255, 255, 255, 0.03),
+
+  'radius-md': 8px,
+  'radius-lg': 12px,
+  'radius-xl': 16px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.3),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.4),
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.4),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.5),
+
+  'font-ui': var(--font-sans),
+
+  'code-comment': #6e6e73,
+  'code-keyword': #00a67e,
+  'code-function': #3b82f6,
+  'code-string': #f59e0b,
+  'code-number': #ab68ff,
+  'code-class': #06b6d4,
+  'code-tag': #00a67e,
+  'code-deleted': #ef4444,
+  'code-inserted': #00a67e,
+  'code-punctuation': #a1a1a6,
+);
+
+[data-theme="verdigris"] {
+  color-scheme: dark;
+  @include define-theme($verdigris-palette);
+}
+
+// =============================================================================
+// Primer — Blue accent on ink-dark grey (GitHub-inspired)
+// =============================================================================
+
+$primer-palette: (
+  'bg-base': #0d1117,
+  'bg-surface': #161b22,
+  'bg-elevated': #1c2129,
+  'bg-overlay': rgba(255, 255, 255, 0.04),
+  'bg-input': #0d1117,
+  'bg-inset': #010409,
+
+  'glass-border': rgba(255, 255, 255, 0.06),
+  'glass-border-hover': rgba(255, 255, 255, 0.12),
+
+  'text-primary': #c9d1d9,
+  'text-secondary': #8b949e,
+  'text-tertiary': #6e7681,
+  'text-disabled': #484f58,
+
+  'green': #3fb950,
+  'red': #f85149,
+  'yellow': #d29922,
+  'blue': #58a6ff,
+  'purple': #bc8cff,
+  'cyan': #39d353,
+
+  'green-fg': #3fb950,
+  'red-fg': #ffa198,
+  'yellow-fg': #e3b341,
+  'blue-fg': #79c0ff,
+  'purple-fg': #d2a8ff,
+  'cyan-fg': #56d364,
+
+  'border-subtle': rgba(255, 255, 255, 0.06),
+  'border-input': rgba(255, 255, 255, 0.10),
+
+  'highlight-top': inset 0 1px 0 rgba(255, 255, 255, 0.03),
+
+  'radius-md': 6px,
+  'radius-lg': 8px,
+  'radius-xl': 12px,
+
+  'shadow-xs': 0 1px 2px rgba(0, 0, 0, 0.3),
+  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.4),
+  'shadow-md': 0 4px 6px rgba(0, 0, 0, 0.4),
+  'shadow-lg': 0 10px 15px rgba(0, 0, 0, 0.5),
+
+  'font-ui': var(--font-sans),
+
+  'code-comment': #6e7681,
+  'code-keyword': #ff7b72,
+  'code-function': #d2a8ff,
+  'code-string': #a5d6ff,
+  'code-number': #79c0ff,
+  'code-class': #ffa657,
+  'code-tag': #7ee787,
+  'code-deleted': #ffa198,
+  'code-inserted': #7ee787,
+  'code-punctuation': #c9d1d9,
+);
+
+[data-theme="primer"] {
+  color-scheme: dark;
+  @include define-theme($primer-palette);
+}