@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/tokens.css

@@ -4,36 +4,46 @@
 /* MD3 surface hierarchy */
 :root,
 [data-sandbox-ui] {
-  --md3-surface: #131228;
-  --md3-surface-dim: #09080F;
-  --md3-surface-bright: #2E2C56;
-  --md3-surface-container-lowest: #06060E;
-  --md3-surface-container-low: #131228;
-  --md3-surface-container: #191738;
-  --md3-surface-container-high: #211F45;
-  --md3-surface-container-highest: #2A2854;
-  --md3-surface-variant: #2A2854;
-  --md3-on-surface: #E8E6F6;
-  --md3-on-surface-variant: #C4C0D8;
-  --md3-primary: #8263FF;
-  --md3-primary-container: #4a3aff;
-  --md3-on-primary: #FFFFFF;
-  --md3-on-primary-container: #FFFFFF;
-  --md3-primary-fixed: #C4AAFF;
-  --md3-primary-fixed-dim: #8263FF;
-  --md3-secondary: #6B7094;
-  --md3-secondary-container: #1E1D35;
-  --md3-on-secondary: #FFFFFF;
-  --md3-on-secondary-container: #C4C0D8;
+  --md3-surface: #0a0a0c;
+  --md3-surface-dim: #070709;
+  --md3-surface-bright: #1b1b22;
+  --md3-surface-container-lowest: #000000;
+  --md3-surface-container-low: #0c0c0f;
+  --md3-surface-container: #101014;
+  --md3-surface-container-high: #15151a;
+  --md3-surface-container-highest: #1e1e24;
+  --md3-surface-variant: #1e1e24;
+  --md3-on-surface: #fdfdfd;
+  --md3-on-surface-variant: #b0b0b8;
+  
+  --md3-primary: #9b8cff;
+  --md3-primary-dim: #705bf5;
+  --md3-primary-container: #5d48e5;
+  --md3-on-primary: #ffffff;
+  --md3-on-primary-container: #efeaff;
+  --md3-primary-fixed: #ada3ff;
+  --md3-primary-fixed-dim: #9082ff;
+  
+  --md3-secondary: #c4b9f5;
+  --md3-secondary-dim: #b6ace7;
+  --md3-secondary-container: #2b234d;
+  --md3-on-secondary: #e8e4ff;
+  --md3-on-secondary-container: #e8e4ff;
+  
   --md3-tertiary: #10b981;
-  --md3-outline: #6B7094;
-  --md3-outline-variant: #2A2B39;
-  --md3-error: #FF4D6D;
-  --md3-error-container: #7A0020;
-  --md3-on-error: #FFFFFF;
-  --md3-inverse-surface: #E8E6F6;
-  --md3-inverse-primary: #4a3aff;
-  --md3-surface-tint: #8263FF;
+  --md3-outline: #474858;
+  --md3-outline-variant: #282937;
+  
+  --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: #4530c5;
+  --md3-inverse-on-surface: #000000;
+  --md3-surface-tint: #9b8cff;
 
   /* Semantic HSL bridge */
   --hsl-background: 248 52% 5%;
@@ -183,11 +193,11 @@
   --brand-emerald: #10b981;
 
   /* Borders */
-  --border-subtle: rgba(107, 112, 148, 0.25);
-  --border-default: rgba(107, 112, 148, 0.40);
-  --border-hover: rgba(107, 112, 148, 0.60);
-  --border-accent: rgba(130, 99, 255, 0.40);
-  --border-accent-hover: rgba(130, 99, 255, 0.65);
+  --border-subtle: rgba(107, 112, 148, 0.08);
+  --border-default: rgba(107, 112, 148, 0.15);
+  --border-hover: rgba(107, 112, 148, 0.25);
+  --border-accent: rgba(130, 99, 255, 0.15);
+  --border-accent-hover: rgba(130, 99, 255, 0.35);
 
   /* Buttons */
   --btn-primary-bg: #4a3aff;
@@ -227,7 +237,21 @@
   --panel-padding: 1rem;
   --content-max-width: 80rem;
 
-  /* Component sizing — override per-app for tighter/looser layouts */
+  /* Typography scale — override per-app for custom type hierarchy.
+     Components reference these instead of hardcoded pixel values. */
+  --font-size-xs: 0.6875rem;      /* 11px — labels, timestamps */
+  --font-size-sm: 0.75rem;        /* 12px — captions, meta */
+  --font-size-base: 0.9375rem;    /* 15px — message body */
+  --font-size-lg: 1rem;           /* 16px — emphasized text */
+  --font-size-xl: 1.25rem;        /* 20px — section headers */
+  --line-height-tight: 1.3;
+  --line-height-base: 1.75;       /* matches leading-7 */
+  --line-height-relaxed: 1.8;
+
+  /* Component spacing — override per-app for tighter/looser layouts */
+  --avatar-size: 2rem;            /* 32px — chat avatars */
+  --timeline-dot-size: 0.625rem;  /* 10px — timeline connector dots */
+  --indicator-dot-size: 0.25rem;  /* 4px — thinking indicator dots */
   --code-padding-x: 0.75rem;
   --code-padding-y: 0.625rem;
   --code-font-size: 0.8125rem;
@@ -240,6 +264,17 @@
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
 
+  /* Syntax highlighting — override per-theme in vault/dawn sections */
+  --syntax-comment: #6B7094;
+  --syntax-keyword: #A78FFF;
+  --syntax-string: #10b981;
+  --syntax-function: #6D9FFF;
+  --syntax-number: #FFB347;
+  --syntax-meta: #8263FF;
+  --syntax-error: #FF4D6D;
+  --syntax-variable: #C4C0D8;
+  --syntax-foreground: #E8E6F6;
+
   /* Transitions */
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
@@ -382,11 +417,11 @@
   --brand-vibrant: #4a3aff;
   --brand-emerald: #10b981;
 
-  --border-subtle: rgba(107, 112, 148, 0.15);
-  --border-default: rgba(107, 112, 148, 0.25);
-  --border-hover: rgba(107, 112, 148, 0.40);
-  --border-accent: rgba(74, 58, 255, 0.25);
-  --border-accent-hover: rgba(74, 58, 255, 0.50);
+  --border-subtle: rgba(107, 112, 148, 0.08); /* fixed white-lined issue */
+  --border-default: rgba(107, 112, 148, 0.15);
+  --border-hover: rgba(107, 112, 148, 0.25);
+  --border-accent: rgba(74, 58, 255, 0.15);
+  --border-accent-hover: rgba(74, 58, 255, 0.35);
 
   --btn-primary-bg: #1e116e;
   --btn-primary-hover: #211f54;
@@ -416,6 +451,623 @@
   --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
   --font-display: "Outfit", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* Light syntax highlighting */
+  --syntax-comment: #8B92B8;
+  --syntax-keyword: #5B3FCC;
+  --syntax-string: #059669;
+  --syntax-function: #2563EB;
+  --syntax-number: #D97706;
+  --syntax-meta: #7C3AED;
+  --syntax-error: #DC2626;
+  --syntax-variable: #334155;
+  --syntax-foreground: #1E293B;
+}
+
+/* ── Ocean — cool blue-teal dark theme ── */
+[data-sandbox-theme="ocean"] {
+  --hsl-background: 215 50% 5%;
+  --hsl-foreground: 210 20% 94%;
+  --hsl-card: 214 42% 11%;
+  --hsl-card-foreground: 210 20% 94%;
+  --hsl-popover: 214 40% 14%;
+  --hsl-popover-foreground: 210 20% 94%;
+  --hsl-primary: 199 85% 50%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 210 25% 18%;
+  --hsl-secondary-foreground: 210 16% 90%;
+  --hsl-muted: 212 22% 15%;
+  --hsl-muted-foreground: 210 17% 52%;
+  --hsl-accent: 210 28% 20%;
+  --hsl-accent-foreground: 210 16% 92%;
+  --hsl-destructive: 0 85% 58%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 214 16% 20%;
+  --hsl-input: 214 30% 14%;
+  --hsl-ring: 199 85% 50%;
+  --hsl-success: 160 84% 39%;
+  --hsl-warning: 40 94% 56%;
+  --hsl-info: 199 85% 50%;
+
+  --depth-1: #060c14;
+  --depth-2: #0c1524;
+  --depth-3: #132035;
+  --depth-4: #1a2b46;
+
+  --status-running: #10b981;
+  --status-creating: #0ea5e9;
+  --status-stopped: #FFB800;
+  --status-warm: #FF8A4C;
+  --status-cold: #38bdf8;
+  --status-error: #ef4444;
+  --status-deleted: #6B7094;
+
+  --glass-bg: var(--depth-2);
+  --glass-bg-strong: var(--depth-3);
+  --glass-border: var(--border-subtle);
+  --glass-border-hover: var(--border-default);
+
+  --surface-success-bg: #022c22;
+  --surface-success-border: #14532d;
+  --surface-success-text: #34d399;
+  --surface-warning-bg: #451a03;
+  --surface-warning-border: #78350f;
+  --surface-warning-text: #fbbf24;
+  --surface-danger-bg: #450a0a;
+  --surface-danger-border: #7f1d1d;
+  --surface-danger-text: #f87171;
+  --surface-info-bg: #082f49;
+  --surface-info-border: #0c4a6e;
+  --surface-info-text: #38bdf8;
+  --surface-teal-bg: #042f2e;
+  --surface-teal-border: #134e4a;
+  --surface-teal-text: #2dd4bf;
+  --surface-violet-bg: #1e1b4b;
+  --surface-violet-border: #312e81;
+  --surface-violet-text: #a5b4fc;
+  --surface-orange-bg: #431407;
+  --surface-orange-border: #7c2d12;
+  --surface-orange-text: #fb923c;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  --sidebar-background: 215 50% 5%;
+  --sidebar-foreground: 210 20% 94%;
+  --sidebar-primary: 199 85% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 210 28% 20%;
+  --sidebar-accent-foreground: 210 16% 92%;
+  --sidebar-border: 214 16% 16%;
+  --sidebar-ring: 199 85% 50%;
+
+  --mesh-teal: rgba(14, 165, 233, 0.06);
+  --mesh-violet: rgba(56, 189, 248, 0.04);
+  --mesh-blue: rgba(14, 165, 233, 0.05);
+
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(14, 165, 233, 0.08), transparent),
+             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(56, 189, 248, 0.05), transparent),
+             linear-gradient(180deg, var(--depth-1), #0a1628 100%);
+  --bg-dark: var(--depth-1);
+  --bg-card: hsl(var(--hsl-card));
+  --bg-elevated: hsl(214 38% 17%);
+  --bg-section: hsl(214 38% 8%);
+  --bg-input: hsl(var(--hsl-input));
+  --bg-hover: rgba(14, 165, 233, 0.08);
+  --bg-selection: rgba(14, 165, 233, 0.18);
+
+  --text-primary: hsl(var(--hsl-foreground));
+  --text-secondary: hsl(210 18% 82%);
+  --text-muted: #5e7490;
+  --text-dim: #3d5068;
+
+  --brand-primary: #0ea5e9;
+  --brand-strong: #0284c7;
+  --brand-cool: #38bdf8;
+  --brand-glow: #7dd3fc;
+  --brand-purple: #38bdf8;
+  --brand-vibrant: #0ea5e9;
+  --brand-emerald: #10b981;
+
+  --border-subtle: rgba(94, 116, 144, 0.08);
+  --border-default: rgba(94, 116, 144, 0.15);
+  --border-hover: rgba(94, 116, 144, 0.25);
+  --border-accent: rgba(14, 165, 233, 0.15);
+  --border-accent-hover: rgba(14, 165, 233, 0.35);
+
+  --btn-primary-bg: #0ea5e9;
+  --btn-primary-hover: #38bdf8;
+  --btn-cta-bg: #0ea5e9;
+  --btn-cta-text: #FFFFFF;
+
+  --code-keyword: #38bdf8;
+  --code-string: #34d399;
+  --code-function: #7dd3fc;
+  --code-number: #fbbf24;
+  --code-success: #10b981;
+  --code-comment: #5e7490;
+  --code-error: #ef4444;
+
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --shadow-glow: 0 0 32px rgba(14, 165, 233, 0.18);
+  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(14, 165, 233, 0.2);
+
+  --tangle-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
+  --tangle-gradient-text: linear-gradient(135deg, #38bdf8, #7dd3fc);
+  --accent-gradient-strong: linear-gradient(135deg, #0ea5e9, #38bdf8);
+  --accent-surface-soft: rgba(14, 165, 233, 0.12);
+  --accent-surface-strong: rgba(14, 165, 233, 0.20);
+  --accent-text: #38bdf8;
+
+  --md3-primary: #38bdf8;
+  --md3-primary-dim: #0ea5e9;
+  --md3-primary-container: #0284c7;
+  --md3-on-primary: #ffffff;
+  --md3-on-primary-container: #e0f2fe;
+  --md3-surface: #0a1020;
+  --md3-surface-dim: #060c14;
+  --md3-surface-bright: #1a2540;
+  --md3-on-surface: #e2e8f0;
+  --md3-on-surface-variant: #94a3b8;
+  --md3-error: #ef4444;
+  --md3-outline: #334155;
+  --md3-outline-variant: #1e293b;
+}
+
+/* ── Ember — warm amber dark theme ── */
+[data-sandbox-theme="ember"] {
+  --hsl-background: 20 40% 5%;
+  --hsl-foreground: 30 20% 93%;
+  --hsl-card: 20 35% 11%;
+  --hsl-card-foreground: 30 20% 93%;
+  --hsl-popover: 20 32% 14%;
+  --hsl-popover-foreground: 30 20% 93%;
+  --hsl-primary: 25 90% 55%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 20 22% 18%;
+  --hsl-secondary-foreground: 30 16% 90%;
+  --hsl-muted: 18 20% 15%;
+  --hsl-muted-foreground: 20 14% 50%;
+  --hsl-accent: 20 25% 20%;
+  --hsl-accent-foreground: 30 16% 92%;
+  --hsl-destructive: 0 85% 55%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 20 14% 20%;
+  --hsl-input: 20 25% 14%;
+  --hsl-ring: 25 90% 55%;
+  --hsl-success: 160 84% 39%;
+  --hsl-warning: 45 96% 56%;
+  --hsl-info: 200 88% 56%;
+
+  --depth-1: #140c06;
+  --depth-2: #1e150c;
+  --depth-3: #2a1e14;
+  --depth-4: #36281c;
+
+  --status-running: #10b981;
+  --status-creating: #f59e0b;
+  --status-stopped: #d97706;
+  --status-warm: #fb923c;
+  --status-cold: #38bdf8;
+  --status-error: #ef4444;
+  --status-deleted: #78716c;
+
+  --glass-bg: var(--depth-2);
+  --glass-bg-strong: var(--depth-3);
+  --glass-border: var(--border-subtle);
+  --glass-border-hover: var(--border-default);
+
+  --surface-success-bg: #052e16;
+  --surface-success-border: #166534;
+  --surface-success-text: #4ade80;
+  --surface-warning-bg: #451a03;
+  --surface-warning-border: #92400e;
+  --surface-warning-text: #fbbf24;
+  --surface-danger-bg: #450a0a;
+  --surface-danger-border: #991b1b;
+  --surface-danger-text: #fca5a5;
+  --surface-info-bg: #082f49;
+  --surface-info-border: #0c4a6e;
+  --surface-info-text: #38bdf8;
+  --surface-teal-bg: #042f2e;
+  --surface-teal-border: #134e4a;
+  --surface-teal-text: #2dd4bf;
+  --surface-violet-bg: #2e1065;
+  --surface-violet-border: #4c1d95;
+  --surface-violet-text: #c4b5fd;
+  --surface-orange-bg: #431407;
+  --surface-orange-border: #9a3412;
+  --surface-orange-text: #fdba74;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  --sidebar-background: 20 40% 5%;
+  --sidebar-foreground: 30 20% 93%;
+  --sidebar-primary: 25 90% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 20 25% 20%;
+  --sidebar-accent-foreground: 30 16% 92%;
+  --sidebar-border: 20 14% 16%;
+  --sidebar-ring: 25 90% 55%;
+
+  --mesh-teal: rgba(245, 158, 11, 0.05);
+  --mesh-violet: rgba(251, 146, 60, 0.04);
+  --mesh-blue: rgba(217, 119, 6, 0.04);
+
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(245, 158, 11, 0.07), transparent),
+             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(251, 146, 60, 0.05), transparent),
+             linear-gradient(180deg, var(--depth-1), #1a1008 100%);
+  --bg-dark: var(--depth-1);
+  --bg-card: hsl(var(--hsl-card));
+  --bg-elevated: hsl(20 30% 16%);
+  --bg-section: hsl(20 30% 8%);
+  --bg-input: hsl(var(--hsl-input));
+  --bg-hover: rgba(245, 158, 11, 0.08);
+  --bg-selection: rgba(245, 158, 11, 0.18);
+
+  --text-primary: hsl(var(--hsl-foreground));
+  --text-secondary: hsl(30 16% 80%);
+  --text-muted: #8c7a68;
+  --text-dim: #5c4e3e;
+
+  --brand-primary: #f59e0b;
+  --brand-strong: #d97706;
+  --brand-cool: #fbbf24;
+  --brand-glow: #fcd34d;
+  --brand-purple: #fbbf24;
+  --brand-vibrant: #f59e0b;
+  --brand-emerald: #10b981;
+
+  --border-subtle: rgba(140, 122, 104, 0.08);
+  --border-default: rgba(140, 122, 104, 0.15);
+  --border-hover: rgba(140, 122, 104, 0.25);
+  --border-accent: rgba(245, 158, 11, 0.15);
+  --border-accent-hover: rgba(245, 158, 11, 0.35);
+
+  --btn-primary-bg: #f59e0b;
+  --btn-primary-hover: #fbbf24;
+  --btn-cta-bg: #f59e0b;
+  --btn-cta-text: #000000;
+
+  --code-keyword: #fbbf24;
+  --code-string: #34d399;
+  --code-function: #fcd34d;
+  --code-number: #fb923c;
+  --code-success: #10b981;
+  --code-comment: #8c7a68;
+  --code-error: #ef4444;
+
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --shadow-glow: 0 0 32px rgba(245, 158, 11, 0.15);
+  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.2);
+
+  --tangle-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
+  --tangle-gradient-text: linear-gradient(135deg, #fbbf24, #fcd34d);
+  --accent-gradient-strong: linear-gradient(135deg, #f59e0b, #fbbf24);
+  --accent-surface-soft: rgba(245, 158, 11, 0.12);
+  --accent-surface-strong: rgba(245, 158, 11, 0.20);
+  --accent-text: #fbbf24;
+
+  --md3-primary: #fbbf24;
+  --md3-primary-dim: #f59e0b;
+  --md3-primary-container: #d97706;
+  --md3-on-primary: #000000;
+  --md3-on-primary-container: #fef3c7;
+  --md3-surface: #120e08;
+  --md3-surface-dim: #0a0806;
+  --md3-surface-bright: #2a2218;
+  --md3-on-surface: #f5f0e8;
+  --md3-on-surface-variant: #a8998a;
+  --md3-error: #ef4444;
+  --md3-outline: #4a3f34;
+  --md3-outline-variant: #2a2218;
+}
+
+/* ── Forest — emerald green dark theme ── */
+[data-sandbox-theme="forest"] {
+  --hsl-background: 155 35% 5%;
+  --hsl-foreground: 150 15% 93%;
+  --hsl-card: 155 30% 10%;
+  --hsl-card-foreground: 150 15% 93%;
+  --hsl-popover: 155 28% 13%;
+  --hsl-popover-foreground: 150 15% 93%;
+  --hsl-primary: 155 80% 40%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 155 20% 17%;
+  --hsl-secondary-foreground: 150 14% 90%;
+  --hsl-muted: 152 18% 14%;
+  --hsl-muted-foreground: 150 14% 48%;
+  --hsl-accent: 155 22% 19%;
+  --hsl-accent-foreground: 150 14% 92%;
+  --hsl-destructive: 0 85% 55%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 155 12% 19%;
+  --hsl-input: 155 22% 13%;
+  --hsl-ring: 155 80% 40%;
+  --hsl-success: 155 80% 40%;
+  --hsl-warning: 40 94% 56%;
+  --hsl-info: 200 88% 56%;
+
+  --depth-1: #060e0a;
+  --depth-2: #0c1a14;
+  --depth-3: #14261e;
+  --depth-4: #1c3228;
+
+  --status-running: #10b981;
+  --status-creating: #34d399;
+  --status-stopped: #eab308;
+  --status-warm: #fb923c;
+  --status-cold: #38bdf8;
+  --status-error: #ef4444;
+  --status-deleted: #6b7280;
+
+  --glass-bg: var(--depth-2);
+  --glass-bg-strong: var(--depth-3);
+  --glass-border: var(--border-subtle);
+  --glass-border-hover: var(--border-default);
+
+  --surface-success-bg: #052e16;
+  --surface-success-border: #166534;
+  --surface-success-text: #4ade80;
+  --surface-warning-bg: #422006;
+  --surface-warning-border: #854d0e;
+  --surface-warning-text: #facc15;
+  --surface-danger-bg: #450a0a;
+  --surface-danger-border: #991b1b;
+  --surface-danger-text: #fca5a5;
+  --surface-info-bg: #082f49;
+  --surface-info-border: #0c4a6e;
+  --surface-info-text: #38bdf8;
+  --surface-teal-bg: #042f2e;
+  --surface-teal-border: #134e4a;
+  --surface-teal-text: #2dd4bf;
+  --surface-violet-bg: #1e1b4b;
+  --surface-violet-border: #3730a3;
+  --surface-violet-text: #a5b4fc;
+  --surface-orange-bg: #431407;
+  --surface-orange-border: #7c2d12;
+  --surface-orange-text: #fb923c;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  --sidebar-background: 155 35% 5%;
+  --sidebar-foreground: 150 15% 93%;
+  --sidebar-primary: 155 80% 40%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 155 22% 19%;
+  --sidebar-accent-foreground: 150 14% 92%;
+  --sidebar-border: 155 12% 15%;
+  --sidebar-ring: 155 80% 40%;
+
+  --mesh-teal: rgba(16, 185, 129, 0.06);
+  --mesh-violet: rgba(52, 211, 153, 0.04);
+  --mesh-blue: rgba(16, 185, 129, 0.04);
+
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(16, 185, 129, 0.08), transparent),
+             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(52, 211, 153, 0.05), transparent),
+             linear-gradient(180deg, var(--depth-1), #0a1a12 100%);
+  --bg-dark: var(--depth-1);
+  --bg-card: hsl(var(--hsl-card));
+  --bg-elevated: hsl(155 26% 16%);
+  --bg-section: hsl(155 26% 8%);
+  --bg-input: hsl(var(--hsl-input));
+  --bg-hover: rgba(16, 185, 129, 0.08);
+  --bg-selection: rgba(16, 185, 129, 0.18);
+
+  --text-primary: hsl(var(--hsl-foreground));
+  --text-secondary: hsl(150 14% 80%);
+  --text-muted: #6b8a7a;
+  --text-dim: #4a6858;
+
+  --brand-primary: #10b981;
+  --brand-strong: #059669;
+  --brand-cool: #34d399;
+  --brand-glow: #6ee7b7;
+  --brand-purple: #34d399;
+  --brand-vibrant: #10b981;
+  --brand-emerald: #10b981;
+
+  --border-subtle: rgba(107, 138, 122, 0.08);
+  --border-default: rgba(107, 138, 122, 0.15);
+  --border-hover: rgba(107, 138, 122, 0.25);
+  --border-accent: rgba(16, 185, 129, 0.15);
+  --border-accent-hover: rgba(16, 185, 129, 0.35);
+
+  --btn-primary-bg: #10b981;
+  --btn-primary-hover: #34d399;
+  --btn-cta-bg: #10b981;
+  --btn-cta-text: #000000;
+
+  --code-keyword: #34d399;
+  --code-string: #a5b4fc;
+  --code-function: #6ee7b7;
+  --code-number: #fbbf24;
+  --code-success: #10b981;
+  --code-comment: #6b8a7a;
+  --code-error: #ef4444;
+
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --shadow-glow: 0 0 32px rgba(16, 185, 129, 0.18);
+  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.2);
+
+  --tangle-gradient: linear-gradient(135deg, #10b981, #34d399);
+  --tangle-gradient-text: linear-gradient(135deg, #34d399, #6ee7b7);
+  --accent-gradient-strong: linear-gradient(135deg, #10b981, #34d399);
+  --accent-surface-soft: rgba(16, 185, 129, 0.12);
+  --accent-surface-strong: rgba(16, 185, 129, 0.20);
+  --accent-text: #34d399;
+
+  --md3-primary: #34d399;
+  --md3-primary-dim: #10b981;
+  --md3-primary-container: #059669;
+  --md3-on-primary: #000000;
+  --md3-on-primary-container: #d1fae5;
+  --md3-surface: #0a0f0c;
+  --md3-surface-dim: #060e0a;
+  --md3-surface-bright: #1a2a22;
+  --md3-on-surface: #ecfdf5;
+  --md3-on-surface-variant: #86a896;
+  --md3-error: #ef4444;
+  --md3-outline: #2d4a3a;
+  --md3-outline-variant: #1a2a22;
+}
+
+/* ── Dawn — warm light theme ── */
+[data-sandbox-theme="dawn"] {
+  --hsl-background: 30 25% 96%;
+  --hsl-foreground: 20 25% 12%;
+  --hsl-card: 30 20% 100%;
+  --hsl-card-foreground: 20 25% 12%;
+  --hsl-popover: 30 20% 100%;
+  --hsl-popover-foreground: 20 25% 12%;
+  --hsl-primary: 15 75% 50%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 25 60% 30%;
+  --hsl-secondary-foreground: 0 0% 100%;
+  --hsl-muted: 30 18% 93%;
+  --hsl-muted-foreground: 20 10% 42%;
+  --hsl-accent: 30 22% 92%;
+  --hsl-accent-foreground: 20 25% 12%;
+  --hsl-destructive: 0 72% 45%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 25 18% 86%;
+  --hsl-input: 25 18% 88%;
+  --hsl-ring: 15 75% 50%;
+  --hsl-success: 152 82% 34%;
+  --hsl-warning: 41 96% 50%;
+  --hsl-info: 212 80% 50%;
+
+  --depth-1: #faf7f4;
+  --depth-2: #f5f0eb;
+  --depth-3: #ebe4dc;
+  --depth-4: #ddd4ca;
+
+  --status-running: #059669;
+  --status-creating: #d97706;
+  --status-stopped: #b45309;
+  --status-warm: #c2410c;
+  --status-cold: #0284c7;
+  --status-error: #dc2626;
+  --status-deleted: #78716c;
+
+  --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: #f0fdf4;
+  --surface-success-border: #bbf7d0;
+  --surface-success-text: #15803d;
+  --surface-warning-bg: #fffbeb;
+  --surface-warning-border: #fde68a;
+  --surface-warning-text: #a16207;
+  --surface-danger-bg: #fef2f2;
+  --surface-danger-border: #fecaca;
+  --surface-danger-text: #b91c1c;
+  --surface-info-bg: #eff6ff;
+  --surface-info-border: #bfdbfe;
+  --surface-info-text: #1d4ed8;
+  --surface-teal-bg: #f0fdfa;
+  --surface-teal-border: #99f6e4;
+  --surface-teal-text: #0f766e;
+  --surface-violet-bg: #f5f3ff;
+  --surface-violet-border: #ddd6fe;
+  --surface-violet-text: #6d28d9;
+  --surface-orange-bg: #fff7ed;
+  --surface-orange-border: #fed7aa;
+  --surface-orange-text: #c2410c;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  --sidebar-background: 30 25% 96%;
+  --sidebar-foreground: 20 25% 12%;
+  --sidebar-primary: 15 75% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 30 22% 90%;
+  --sidebar-accent-foreground: 20 25% 12%;
+  --sidebar-border: 25 18% 86%;
+  --sidebar-ring: 15 75% 50%;
+
+  --mesh-teal: rgba(5, 150, 105, 0.04);
+  --mesh-violet: rgba(217, 119, 6, 0.03);
+  --mesh-blue: rgba(2, 132, 199, 0.03);
+
+  --bg-root: #faf7f4;
+  --bg-dark: #f5f0eb;
+  --bg-card: #ffffff;
+  --bg-elevated: #ebe4dc;
+  --bg-section: #f5f0eb;
+  --bg-input: #f2ece5;
+  --bg-hover: rgba(217, 119, 6, 0.05);
+  --bg-selection: rgba(217, 119, 6, 0.08);
+
+  --text-primary: #2a1f14;
+  --text-secondary: #4a3f34;
+  --text-muted: #8c7a68;
+  --text-dim: #b0a090;
+
+  --brand-primary: #d97706;
+  --brand-strong: #b45309;
+  --brand-cool: #f59e0b;
+  --brand-glow: #fbbf24;
+  --brand-purple: #d97706;
+  --brand-vibrant: #ea580c;
+  --brand-emerald: #059669;
+
+  --border-subtle: rgba(140, 122, 104, 0.08);
+  --border-default: rgba(140, 122, 104, 0.15);
+  --border-hover: rgba(140, 122, 104, 0.25);
+  --border-accent: rgba(217, 119, 6, 0.15);
+  --border-accent-hover: rgba(217, 119, 6, 0.35);
+
+  --btn-primary-bg: #d97706;
+  --btn-primary-hover: #b45309;
+  --btn-cta-bg: #ea580c;
+  --btn-cta-text: #ffffff;
+
+  --code-keyword: #9a3412;
+  --code-string: #059669;
+  --code-function: #b45309;
+  --code-number: #c2410c;
+  --code-success: #059669;
+  --code-comment: #8c7a68;
+  --code-error: #dc2626;
+
+  --shadow-card: 0 1px 4px rgba(42, 31, 20, 0.06), 0 0 0 1px rgba(42, 31, 20, 0.04);
+  --shadow-dropdown: 0 8px 32px rgba(42, 31, 20, 0.10), 0 0 0 1px rgba(42, 31, 20, 0.06);
+  --shadow-glow: 0 0 32px rgba(217, 119, 6, 0.10);
+  --shadow-accent: 0 2px 8px rgba(217, 119, 6, 0.12), 0 0 0 1px rgba(217, 119, 6, 0.08);
+
+  --tangle-gradient: linear-gradient(135deg, #d97706, #f59e0b);
+  --tangle-gradient-text: linear-gradient(135deg, #b45309, #d97706);
+  --accent-gradient-strong: linear-gradient(135deg, #d97706, #f59e0b);
+  --accent-surface-soft: rgba(217, 119, 6, 0.06);
+  --accent-surface-strong: rgba(217, 119, 6, 0.12);
+  --accent-text: #b45309;
+
+  --md3-primary: #f59e0b;
+  --md3-primary-dim: #d97706;
+  --md3-primary-container: #fef3c7;
+  --md3-on-primary: #ffffff;
+  --md3-on-primary-container: #78350f;
+  --md3-surface: #faf7f4;
+  --md3-surface-dim: #f5f0eb;
+  --md3-surface-bright: #ffffff;
+  --md3-on-surface: #2a1f14;
+  --md3-on-surface-variant: #78716c;
+  --md3-error: #dc2626;
+  --md3-outline: #d6d3d1;
+  --md3-outline-variant: #e7e5e4;
+
+  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Outfit", "Geist", sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
 [data-density="compact"] {
@@ -426,6 +1078,14 @@
   --control-height: 2rem;
   --panel-padding: 0.625rem;
 
+  --font-size-xs: 0.625rem;
+  --font-size-sm: 0.6875rem;
+  --font-size-base: 0.8125rem;
+  --font-size-lg: 0.875rem;
+  --line-height-base: 1.6;
+  --avatar-size: 1.5rem;
+  --timeline-dot-size: 0.5rem;
+
   --code-padding-x: 0.625rem;
   --code-padding-y: 0.5rem;
   --code-font-size: 0.75rem;
@@ -438,3 +1098,4 @@
   --tool-card-py: 0.375rem;
   --tool-icon-size: 1.5rem;
 }
+