@tangle-network/brand 1.9.0 → 1.10.0

package/src/styles/legacy-light.css

@@ -0,0 +1,873 @@
+/* GENERATED by scripts/gen-compat.mjs. Do not edit.
+ * Source: tokens.css + named-themes.css
+ * SHA-256: aa20f555957578963e2ea8f89a097a40576e564dd23e45f7412035de163ca11e
+ * Light-default compatibility; all explicit modes remain canonical.
+ */
+:where(:root),
+[data-sandbox-ui],
+[data-sandbox-theme="vault"],
+[data-sandbox-theme="dawn"],
+[data-theme="dark"],
+[data-theme="light"],
+[data-theme="aubergine"],
+[data-theme="aubergine-light"],
+[data-theme="arena"],
+[data-theme="arena-light"],
+[data-theme="tangle-dark"],
+[data-theme="tangle-light"],
+.light,
+.dark {
+    color-scheme: dark;
+    --md3-surface: #161616;
+    --md3-surface-dim: #101010;
+    --md3-surface-bright: #3b3b3b;
+    --md3-surface-container-lowest: #101010;
+    --md3-surface-container-low: #242424;
+    --md3-surface-container: #303030;
+    --md3-surface-container-high: #353535;
+    --md3-surface-container-highest: #3b3b3b;
+    --md3-surface-variant: #353535;
+    --md3-on-surface: #e6e6e6;
+    --md3-on-surface-variant: #b5b5b5;
+    --md3-primary: #A5B4FC;
+    --md3-primary-dim: #7C6CF6;
+    --md3-primary-container: #4C3FC5;
+    --md3-on-primary: #ffffff;
+    --md3-on-primary-container: #E0E7FF;
+    --md3-primary-fixed: #A5AAFC;
+    --md3-primary-fixed-dim: #818CF8;
+    --md3-secondary: #C7D2FE;
+    --md3-secondary-dim: #A5B4FC;
+    --md3-secondary-container: #312E81;
+    --md3-on-secondary: #E8E5FF;
+    --md3-on-secondary-container: #E8E5FF;
+    --md3-tertiary: #10B981;
+    --md3-tertiary-container: var(--surface-success-bg);
+    --md3-outline: #8e8e8e;
+    --md3-outline-variant: #4c4c4c;
+    --md3-error: #ff5277;
+    --md3-error-dim: #eb2855;
+    --md3-error-container: #82042b;
+    --md3-on-error: #ffffff;
+    --md3-on-error-container: #ffbdf2;
+    --md3-inverse-surface: #fdfdfd;
+    --md3-inverse-primary: #4C3FC5;
+    --md3-inverse-on-surface: #000000;
+    --md3-surface-tint: #A5B4FC;
+    --hsl-background: 0 0% 8.6275%;
+    --hsl-foreground: 0 0% 90.1961%;
+    --hsl-card: 0 0% 18.8235%;
+    --hsl-card-foreground: 0 0% 90.1961%;
+    --hsl-popover: 0 0% 20.7843%;
+    --hsl-popover-foreground: 0 0% 90.1961%;
+    --hsl-primary: 246 54% 51%;
+    --hsl-primary-foreground: 0 0% 100%;
+    --hsl-secondary: 0 0% 20.7843%;
+    --hsl-secondary-foreground: 0 0% 90.1961%;
+    --hsl-muted: 0 0% 20.7843%;
+    --hsl-muted-foreground: 0 0% 70.9804%;
+    --hsl-accent: 0 0% 20.7843%;
+    --hsl-accent-foreground: 0 0% 90.1961%;
+    --hsl-destructive: 348 74% 48%;
+    --hsl-destructive-foreground: 0 0% 100%;
+    --hsl-border: 0 0% 29.8039%;
+    --hsl-input: 0 0% 12.1569%;
+    --hsl-ring: 233 100% 87%;
+    --hsl-success: 160 84% 39%;
+    --hsl-warning: 40 94% 56%;
+    --hsl-info: 200 88% 56%;
+    --background: var(--hsl-background);
+    --foreground: var(--hsl-foreground);
+    --card: var(--hsl-card);
+    --card-foreground: var(--hsl-card-foreground);
+    --popover: var(--hsl-popover);
+    --popover-foreground: var(--hsl-popover-foreground);
+    --primary: var(--hsl-primary);
+    --primary-foreground: var(--hsl-primary-foreground);
+    --secondary: var(--hsl-secondary);
+    --secondary-foreground: var(--hsl-secondary-foreground);
+    --muted: var(--hsl-muted);
+    --muted-foreground: var(--hsl-muted-foreground);
+    --accent: var(--hsl-accent);
+    --accent-foreground: var(--hsl-accent-foreground);
+    --destructive: var(--hsl-destructive);
+    --destructive-foreground: var(--hsl-destructive-foreground);
+    --border: var(--hsl-border);
+    --input: var(--hsl-muted-foreground);
+    --ring: var(--hsl-ring);
+    --success: var(--hsl-success);
+    --warning: var(--hsl-warning);
+    --error: var(--hsl-destructive);
+    --info: var(--hsl-info);
+    --sidebar-background: 0 0% 6.2745%;
+    --sidebar-foreground: 0 0% 90.1961%;
+    --sidebar-primary: 246 54% 51%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 20.7843%;
+    --sidebar-accent-foreground: 0 0% 90.1961%;
+    --sidebar-border: 0 0% 29.8039%;
+    --sidebar-ring: 233 100% 87%;
+    --depth-1: #161616;
+    --depth-2: #303030;
+    --depth-3: #353535;
+    --depth-4: #3b3b3b;
+    --status-running: #10B981;
+    --status-creating: #A5B4FC;
+    --status-stopped: #FFB800;
+    --status-warm: #FF8A4C;
+    --status-cold: #4AABFF;
+    --status-error: #FF4D6D;
+    --status-deleted: #6B7094;
+    --surface-success-bg: #2f5146;
+    --surface-success-border: #3c7760;
+    --surface-success-text: #5ed7a4;
+    --surface-warning-bg: #6a402c;
+    --surface-warning-border: #916436;
+    --surface-warning-text: #f4c14f;
+    --surface-danger-bg: #733b36;
+    --surface-danger-border: #9a5b56;
+    --surface-danger-text: #ffada9;
+    --surface-info-bg: #2d4e67;
+    --surface-info-border: #3d7292;
+    --surface-info-text: #67cdff;
+    --surface-teal-bg: #042f2e;
+    --surface-teal-border: #134e4a;
+    --surface-teal-text: #2dd4bf;
+    --surface-violet-bg: #1e1b4b;
+    --surface-violet-border: #3730a3;
+    --surface-violet-text: #B8B2F5;
+    --surface-orange-bg: #431407;
+    --surface-orange-border: #7c2d12;
+    --surface-orange-text: #fb923c;
+    --run-mix-succeeded: #76edb9;
+    --run-mix-waiting: #e9b642;
+    --run-mix-failed: #e1918e;
+    --run-mix-in-flight: #2d9bca;
+    --run-mix-cancelled: #767d90;
+    --surface-neutral-bg: var(--depth-3);
+    --surface-neutral-border: var(--border-subtle);
+    --surface-neutral-text: var(--text-muted);
+    --glass-bg: var(--depth-2);
+    --glass-bg-strong: var(--depth-3);
+    --glass-border: var(--border-subtle);
+    --glass-border-hover: var(--border-default);
+    --glass-blur: 0px;
+    --mesh-teal: transparent;
+    --mesh-violet: transparent;
+    --mesh-blue: transparent;
+    --tangle-gradient: linear-gradient(135deg, #4C3FC5, #A5B4FC);
+    --tangle-gradient-text: linear-gradient(135deg, #C7D2FE, #A5B4FC);
+    --accent-gradient-strong: linear-gradient(135deg, #4C3FC5, #7C6CF6);
+    --accent-surface-soft: rgba(165, 180, 252, 0.07);
+    --accent-surface-strong: rgba(76, 63, 197, 0.30);
+    --accent-text: #A5B4FC;
+    --bg-root: #161616;
+    --bg-dark: var(--depth-1);
+    --bg-card: var(--depth-2);
+    --bg-elevated: var(--depth-4);
+    --bg-section: var(--depth-1);
+    --bg-input: hsl(var(--hsl-input));
+    --bg-hover: rgba(165, 180, 252, 0.07);
+    --bg-selection: rgba(124, 108, 246, 0.28);
+    --text-primary: #e6e6e6;
+    --text-secondary: #c7c7c7;
+    --text-muted: #b5b5b5;
+    --text-dim: #a5a5a5;
+    --brand-primary: #7C6CF6;
+    --brand-strong: #2E2A5E;
+    --brand-strong-text: #ffffff;
+    --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
+    --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
+    --brand-cool: #818CF8;
+    --brand-glow: #A5AAFC;
+    --brand-purple: #C7D2FE;
+    --brand-vibrant: #6366F1;
+    --brand-emerald: #10B981;
+    --border-subtle: rgba(255, 255, 255, 0.10);
+    --border-default: rgba(255, 255, 255, 0.16);
+    --border-hover: rgba(255, 255, 255, 0.28);
+    --border-accent: rgba(129, 140, 248, 0.35);
+    --border-accent-hover: rgba(129, 140, 248, 0.50);
+    --btn-primary-bg: #4C3FC5;
+    --btn-primary-hover: #5A50D6;
+    --btn-primary-text: #ffffff;
+    --btn-cta-bg: #4C3FC5;
+    --btn-cta-text: #FFFFFF;
+    --code-keyword: #A5AAFC;
+    --code-string: #34D399;
+    --code-function: #6D9FFF;
+    --code-number: #FFB347;
+    --code-success: #10B981;
+    --code-comment: #606294;
+    --code-error: #FF4D6D;
+    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+    --shadow-glow: none;
+    --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
+    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+    --shadow-status-running: none;
+    --shadow-status-creating: none;
+    --shadow-status-error: none;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-pill: 999px;
+    --radius-full: 999px;
+    --radius-composer: 26px;
+    --control-height: 2.25rem;
+    --panel-padding: 1rem;
+    --content-max-width: 80rem;
+    --font-size-xs: 0.6875rem;
+    --font-size-sm: 0.75rem;
+    --font-size-base: 0.9375rem;
+    --font-size-lg: 1rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+    --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
+    --line-height-tight: 1.3;
+    --line-height-base: 1.6;
+    --line-height-relaxed: 1.75;
+    --line-height-display: 1.05;
+    --line-height-heading: 1.15;
+    --tracking-tight: -0.02em;
+    --tracking-snug: -0.01em;
+    --tracking-wide: 0.08em;
+    --avatar-size: 2rem;
+    --timeline-dot-size: 0.625rem;
+    --indicator-dot-size: 0.25rem;
+    --code-padding-x: 0.75rem;
+    --code-padding-y: 0.625rem;
+    --code-font-size: 0.8125rem;
+    --code-line-height: 1.5;
+    --chat-message-px: 0.875rem;
+    --chat-message-py: 0.5rem;
+    --chat-input-py: 0.625rem;
+    --card-padding: 1.25rem;
+    --tool-card-px: 0.75rem;
+    --tool-card-py: 0.5rem;
+    --tool-icon-size: 1.75rem;
+    --code-header-bg: hsl(var(--hsl-background));
+    --syntax-comment: #8b8fbc;
+    --syntax-keyword: #A78FFF;
+    --syntax-string: #10b981;
+    --syntax-function: #6D9FFF;
+    --syntax-number: #FFB347;
+    --syntax-meta: #8263FF;
+    --syntax-error: #FF4D6D;
+    --syntax-variable: #C4C0D8;
+    --syntax-foreground: #E8E6F6;
+    --duration-instant: 90ms;
+    --duration-fast: 150ms;
+    --duration-base: 240ms;
+    --duration-slow: 360ms;
+    --duration-stream: 420ms;
+    --duration-arrive: 600ms;
+    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+    --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+    --motion-control: var(--duration-fast) var(--ease-standard);
+    --motion-surface: var(--duration-base) var(--ease-entrance);
+    --motion-dismiss: var(--duration-instant) var(--ease-exit);
+    --motion-stream: var(--duration-stream) var(--ease-expo);
+    --motion-arrive: var(--duration-arrive) var(--ease-expo);
+    --stagger-step: 50ms;
+    --stagger-index: 0;
+    --arrive-distance: 8px;
+    --stream-blur: 4px;
+    --transition-fast: 0.1s ease;
+    --transition-default: 0.16s ease;
+    --transition-medium: 0.24s ease;
+    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter", "Geist", sans-serif;
+    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+}
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
+[data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"],
+.light,
+:where(:root) {
+    color-scheme: light;
+    --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
+    --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;
+    --md3-surface: #eaeaea;
+    --md3-surface-dim: #dadada;
+    --md3-surface-bright: #ffffff;
+    --md3-surface-container-lowest: #ffffff;
+    --md3-surface-container-low: #f7f7f7;
+    --md3-surface-container: #ffffff;
+    --md3-surface-container-high: #f2f2f2;
+    --md3-surface-container-highest: #ffffff;
+    --md3-surface-variant: #f2f2f2;
+    --md3-on-surface: #2d2d2d;
+    --md3-on-surface-variant: #4c4c4c;
+    --md3-primary: #3E349E;
+    --md3-primary-dim: #352B88;
+    --md3-primary-container: #352B88;
+    --md3-on-primary: #ffffff;
+    --md3-on-primary-container: #9B93F0;
+    --md3-primary-fixed: #E8E5FF;
+    --md3-primary-fixed-dim: #C5C0F0;
+    --md3-secondary: #524A78;
+    --md3-secondary-dim: #3E3660;
+    --md3-secondary-container: #E8E5FF;
+    --md3-on-secondary: #ffffff;
+    --md3-on-secondary-container: #524A78;
+    --md3-tertiary: #065F46;
+    --md3-tertiary-container: #D1FAE5;
+    --md3-outline: #787878;
+    --md3-outline-variant: #d0d0d0;
+    --md3-error: #ba1a1a;
+    --md3-error-dim: #93000a;
+    --md3-error-container: #ffdad6;
+    --md3-on-error: #ffffff;
+    --md3-on-error-container: #93000a;
+    --md3-inverse-surface: #2e2e3e;
+    --md3-inverse-primary: #A5AAFC;
+    --md3-inverse-on-surface: #f0f1f4;
+    --md3-surface-tint: #6366F1;
+    --hsl-background: 0 0% 91.7647%;
+    --hsl-foreground: 0 0% 17.6471%;
+    --hsl-card: 0 0% 100%;
+    --hsl-card-foreground: 0 0% 17.6471%;
+    --hsl-popover: 0 0% 100%;
+    --hsl-popover-foreground: 0 0% 17.6471%;
+    --hsl-primary: 246 54% 51%;
+    --hsl-primary-foreground: 0 0% 100%;
+    --hsl-secondary: 0 0% 94.902%;
+    --hsl-secondary-foreground: 0 0% 17.6471%;
+    --hsl-muted: 0 0% 94.902%;
+    --hsl-muted-foreground: 0 0% 29.8039%;
+    --hsl-accent: 0 0% 94.902%;
+    --hsl-accent-foreground: 0 0% 17.6471%;
+    --hsl-destructive: 0 72% 41%;
+    --hsl-destructive-foreground: 0 0% 100%;
+    --hsl-border: 0 0% 81.5686%;
+    --hsl-input: 0 0% 96.0784%;
+    --hsl-ring: 246 54% 51%;
+    --hsl-success: 160 84% 30%;
+    --hsl-warning: 41 96% 50%;
+    --hsl-info: 212 80% 50%;
+    --depth-1: #eaeaea;
+    --depth-2: #ffffff;
+    --depth-3: #f2f2f2;
+    --depth-4: #ffffff;
+    --status-running: #059669;
+    --status-creating: #3E349E;
+    --status-stopped: #B45309;
+    --status-warm: #C05621;
+    --status-cold: #1D6FA4;
+    --status-error: #ba1a1a;
+    --status-deleted: #6B6B82;
+    --glass-bg: var(--depth-2);
+    --glass-bg-strong: var(--depth-1);
+    --glass-border: var(--border-subtle);
+    --glass-border-hover: var(--border-default);
+    --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;
+    --surface-teal-bg: #f0fdfa;
+    --surface-teal-border: #99f6e4;
+    --surface-teal-text: #0f766e;
+    --surface-violet-bg: #F0EEFF;
+    --surface-violet-border: #C5C0F0;
+    --surface-violet-text: #3E349E;
+    --surface-orange-bg: #fff7ed;
+    --surface-orange-border: #fed7aa;
+    --surface-orange-text: #c2410c;
+    --run-mix-succeeded: #3c9b78;
+    --run-mix-waiting: #c16227;
+    --run-mix-failed: #cd342f;
+    --run-mix-in-flight: #00679e;
+    --run-mix-cancelled: #515367;
+    --surface-neutral-bg: var(--depth-3);
+    --surface-neutral-border: var(--border-subtle);
+    --surface-neutral-text: var(--text-muted);
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 0 0% 17.6471%;
+    --sidebar-primary: 246 54% 51%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 94.902%;
+    --sidebar-accent-foreground: 0 0% 17.6471%;
+    --sidebar-border: 0 0% 81.5686%;
+    --sidebar-ring: 246 54% 51%;
+    --mesh-teal: transparent;
+    --mesh-violet: transparent;
+    --mesh-blue: transparent;
+    --bg-root: #eaeaea;
+    --bg-dark: var(--depth-1);
+    --bg-card: var(--depth-2);
+    --bg-elevated: var(--depth-4);
+    --bg-section: var(--depth-1);
+    --bg-input: hsl(var(--hsl-input));
+    --bg-hover: rgba(76, 63, 198, 0.06);
+    --bg-selection: rgba(76, 63, 198, 0.16);
+    --text-primary: #2d2d2d;
+    --text-secondary: #3f3f3f;
+    --text-muted: #4c4c4c;
+    --text-dim: #686868;
+    --brand-primary: #6366F1;
+    --brand-strong: #2E2A5E;
+    --brand-strong-text: #ffffff;
+    --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
+    --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
+    --brand-cool: #818CF8;
+    --brand-glow: #A5AAFC;
+    --brand-purple: #6366F1;
+    --brand-vibrant: #6366F1;
+    --brand-emerald: #059669;
+    --border-subtle: rgba(0, 0, 0, 0.10);
+    --border-default: rgba(0, 0, 0, 0.14);
+    --border-hover: rgba(0, 0, 0, 0.24);
+    --border-accent: rgba(91, 78, 212, 0.18);
+    --border-accent-hover: rgba(91, 78, 212, 0.35);
+    --btn-primary-bg: #4C3FC5;
+    --btn-primary-hover: #5A50D6;
+    --btn-primary-text: #ffffff;
+    --btn-cta-bg: #4C3FC5;
+    --btn-cta-text: #ffffff;
+    --code-keyword: #3E349E;
+    --code-string: #059669;
+    --code-function: #352B88;
+    --code-number: #B45309;
+    --code-success: #059669;
+    --code-comment: #6B6E8A;
+    --code-error: #ba1a1a;
+    --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
+    --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
+    --shadow-glow: none;
+    --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
+    --tangle-gradient: linear-gradient(135deg, #4F46E5, #5B4ED4);
+    --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #5B4ED4);
+    --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
+    --accent-surface-soft: rgba(76, 63, 198, 0.05);
+    --accent-surface-strong: rgba(76, 63, 198, 0.13);
+    --accent-text: #5047eb;
+    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter", "Geist", sans-serif;
+    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-pill: 999px;
+    --radius-full: 999px;
+    --radius-composer: 26px;
+}
+:where(:root),
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
+[data-theme] {
+    --focus-border: hsl(var(--hsl-ring) / 0.8);
+    --focus-halo: hsl(var(--hsl-ring) / 0.18);
+    --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
+    --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
+    --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
+}
+:where(:root),
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
+[data-theme] {
+    --chart-ink: var(--text-primary);
+    --chart-ink-muted: var(--text-dim);
+    --chart-muted: var(--md3-outline);
+    --chart-grid: var(--md3-surface-container-high);
+    --chart-rule: var(--md3-outline-variant);
+    --chart-shade: var(--bg-hover);
+    --chart-accent: var(--brand-cool);
+    --chart-tier-c: #4a4a95;
+    --chart-tier-b: #5b5bd6;
+    --chart-tier-a: #8b87f0;
+    --chart-tier-s: #b1a9ff;
+}
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
+[data-theme="light"],
+.light,
+[data-theme$="-light"],
+:where(:root) {
+    --chart-accent: hsl(var(--hsl-primary));
+    --chart-tier-c: #9b9ef0;
+    --chart-tier-b: #7c7fe3;
+    --chart-tier-a: #5b5bd6;
+    --chart-tier-s: #272962;
+}
+@media (prefers-reduced-motion: reduce) {
+    :where(:root),
+  .dark,
+  .light,
+  [data-sandbox-ui],
+  [data-sandbox-theme],
+  [data-theme] {
+        --duration-instant: 0ms;
+        --duration-fast: 0ms;
+        --duration-base: 0ms;
+        --duration-slow: 0ms;
+        --duration-stream: 0ms;
+        --duration-arrive: 0ms;
+        --stagger-step: 0ms;
+        --motion-control: var(--duration-fast) var(--ease-standard);
+        --motion-surface: var(--duration-base) var(--ease-entrance);
+        --motion-dismiss: var(--duration-instant) var(--ease-exit);
+        --motion-stream: var(--duration-stream) var(--ease-expo);
+        --motion-arrive: var(--duration-arrive) var(--ease-expo);
+    }
+}
+:where(:root),
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
+[data-theme] {
+    --text-display: var(--font-size-display);
+    --text-hero: var(--font-size-hero);
+    --text-page: var(--font-size-3xl);
+    --text-section: var(--font-size-xl);
+    --text-eyebrow: var(--font-size-sm);
+    --color-depth-1: var(--depth-1);
+    --color-depth-2: var(--depth-2);
+    --color-depth-3: var(--depth-3);
+    --color-depth-4: var(--depth-4);
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--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);
+}
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+    --hsl-secondary-foreground: 0 0% 10%;
+    --surface-neutral-text: #4b5563;
+}
+[data-theme="aubergine"] {
+    --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;
+}
+[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;
+}
+[data-theme="tangle-dark"] {
+    --hsl-background: 0 0% 8.6275%;
+    --hsl-foreground: 0 0% 90.1961%;
+    --hsl-card: 0 0% 18.8235%;
+    --hsl-card-foreground: 0 0% 90.1961%;
+    --hsl-popover: 0 0% 20.7843%;
+    --hsl-popover-foreground: 0 0% 90.1961%;
+    --hsl-primary: 246 54% 51%;
+    --hsl-primary-foreground: 0 0% 100%;
+    --hsl-secondary: 0 0% 20.7843%;
+    --hsl-secondary-foreground: 0 0% 90.1961%;
+    --hsl-muted: 0 0% 20.7843%;
+    --hsl-muted-foreground: 0 0% 70.9804%;
+    --hsl-accent: 0 0% 20.7843%;
+    --hsl-accent-foreground: 0 0% 90.1961%;
+    --hsl-destructive: 348 74% 48%;
+    --hsl-destructive-foreground: 0 0% 100%;
+    --hsl-border: 0 0% 29.8039%;
+    --hsl-input: 0 0% 12.1569%;
+    --hsl-ring: 233 100% 87%;
+    --depth-1: #161616;
+    --depth-2: #303030;
+    --depth-3: #353535;
+    --depth-4: #3b3b3b;
+    --bg-root: #161616;
+    --bg-card: var(--depth-2);
+    --bg-input: hsl(var(--hsl-input));
+    --md3-surface-container-lowest: #101010;
+    --md3-surface-container-low: #242424;
+    --md3-surface-container: #303030;
+    --md3-surface-container-high: #353535;
+    --md3-surface-container-highest: #3b3b3b;
+    --md3-outline-variant: #4c4c4c;
+    --border-subtle: rgba(255, 255, 255, 0.10);
+    --border-default: rgba(255, 255, 255, 0.16);
+    --border-hover: rgba(255, 255, 255, 0.28);
+    --accent-text: #A5B4FC;
+    --brand-primary: #7C6CF6;
+    --brand-glow: #A5AAFC;
+    --text-primary: #e6e6e6;
+    --text-secondary: #c7c7c7;
+    --text-muted: #b5b5b5;
+    --text-dim: #a5a5a5;
+}
+[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;
+}
+.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%;
+    --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);
+}