@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/dist/tokens.css

@@ -1,60 +1,70 @@
 /* Tangle Sandbox UI design tokens */
-/* Brand reference: tangle.tools — deep indigo palette, electric #4a3aff primary */
+/* Brand: warm purple palette, #5B4ED4 primary */
 
 /* 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-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-surface: #0a0a14;
+  --md3-surface-dim: #07070d;
+  --md3-surface-bright: #1b1a2c;
+  --md3-surface-container-lowest: #000001;
+  --md3-surface-container-low: #0d0c18;
+  --md3-surface-container: #11101e;
+  --md3-surface-container-high: #171624;
+  --md3-surface-container-highest: #1f1e30;
+  --md3-surface-variant: #1f1e30;
+  --md3-on-surface: #fdfdfd;
+  --md3-on-surface-variant: #aaa8b8;
+
+  --md3-primary: #818CF8;
+  --md3-primary-dim: #6366F1;
+  --md3-primary-container: #4F46E5;
+  --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-outline: #434260;
+  --md3-outline-variant: #2A293D;
+
+  --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: #4F46E5;
+  --md3-inverse-on-surface: #000000;
+  --md3-surface-tint: #818CF8;
 
   /* Semantic HSL bridge */
-  --hsl-background: 248 52% 5%;
-  --hsl-foreground: 244 20% 94%;
-  --hsl-card: 246 42% 12%;
-  --hsl-card-foreground: 244 20% 94%;
-  --hsl-popover: 246 40% 15%;
-  --hsl-popover-foreground: 244 20% 94%;
-  --hsl-primary: 247 100% 61%;
+  --hsl-background: 244 28% 5%;
+  --hsl-foreground: 240 18% 94%;
+  --hsl-card: 246 30% 11%;
+  --hsl-card-foreground: 240 18% 94%;
+  --hsl-popover: 246 28% 14%;
+  --hsl-popover-foreground: 240 18% 94%;
+  --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 243 25% 19%;
+  --hsl-secondary: 248 24% 18%;
   --hsl-secondary-foreground: 240 16% 90%;
-  --hsl-muted: 242 22% 16%;
-  --hsl-muted-foreground: 233 17% 62%;
-  --hsl-accent: 245 28% 21%;
+  --hsl-muted: 246 22% 15%;
+  --hsl-muted-foreground: 240 14% 58%;
+  --hsl-accent: 248 26% 20%;
   --hsl-accent-foreground: 240 16% 92%;
   --hsl-destructive: 348 90% 60%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 236 16% 22%;
-  --hsl-input: 245 30% 15%;
-  --hsl-ring: 247 100% 61%;
+  --hsl-border: 244 14% 22%;
+  --hsl-input: 246 28% 14%;
+  --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
   --hsl-info: 200 88% 56%;
@@ -85,24 +95,24 @@
   --info: var(--hsl-info);
 
   /* Sidebar tokens */
-  --sidebar-background: 248 52% 5%;
-  --sidebar-foreground: 244 20% 94%;
-  --sidebar-primary: 247 100% 61%;
+  --sidebar-background: 244 28% 5%;
+  --sidebar-foreground: 240 18% 94%;
+  --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 245 28% 21%;
+  --sidebar-accent: 248 26% 20%;
   --sidebar-accent-foreground: 240 16% 92%;
-  --sidebar-border: 236 16% 18%;
-  --sidebar-ring: 247 100% 61%;
+  --sidebar-border: 244 14% 17%;
+  --sidebar-ring: 239 84% 67%;
 
-  /* Depth scale — Tangle deep indigo surfaces */
-  --depth-1: #08071A;
-  --depth-2: #131228;
-  --depth-3: #1C1A3A;
-  --depth-4: #26244C;
+  /* Depth scale — Tangle deep purple surfaces */
+  --depth-1: #0C0B1D;
+  --depth-2: #141328;
+  --depth-3: #1D1B38;
+  --depth-4: #262448;
 
   /* Status colors */
-  --status-running: #10b981;
-  --status-creating: #8263FF;
+  --status-running: #10B981;
+  --status-creating: #9B93F0;
   --status-stopped: #FFB800;
   --status-warm: #FF8A4C;
   --status-cold: #4AABFF;
@@ -112,7 +122,7 @@
   /* Status surface tokens — bg / border / text for each semantic color */
   --surface-success-bg: #022c22;
   --surface-success-border: #14532d;
-  --surface-success-text: #34d399;
+  --surface-success-text: #34D399;
   --surface-warning-bg: #451a03;
   --surface-warning-border: #78350f;
   --surface-warning-text: #fbbf24;
@@ -125,9 +135,9 @@
   --surface-teal-bg: #042f2e;
   --surface-teal-border: #134e4a;
   --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #2e1065;
-  --surface-violet-border: #4c1d95;
-  --surface-violet-text: #a78bfa;
+  --surface-violet-bg: #1e1b4b;
+  --surface-violet-border: #3730a3;
+  --surface-violet-text: #B8B2F5;
   --surface-orange-bg: #431407;
   --surface-orange-border: #7c2d12;
   --surface-orange-text: #fb923c;
@@ -144,73 +154,77 @@
 
   /* Mesh gradient — Tangle brand glows */
   --mesh-teal: rgba(16, 185, 129, 0.05);
-  --mesh-violet: rgba(130, 99, 255, 0.07);
-  --mesh-blue: rgba(74, 58, 255, 0.04);
+  --mesh-violet: rgba(99, 102, 241, 0.07);
+  --mesh-blue: rgba(129, 140, 248, 0.04);
 
-  /* Brand gradients — Tangle exact */
-  --tangle-gradient: linear-gradient(135deg, #8263FF, #4a3aff);
-  --tangle-gradient-text: linear-gradient(135deg, #A78FFF, #6D6AFF);
-  --accent-gradient-strong: linear-gradient(135deg, #8263FF, #4a3aff);
-  --accent-surface-soft: rgba(130, 99, 255, 0.12);
-  --accent-surface-strong: rgba(130, 99, 255, 0.20);
-  --accent-text: #A78FFF;
+  /* Brand gradients — Tangle */
+  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
+  --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
+  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
+  --accent-surface-soft: rgba(99, 102, 241, 0.12);
+  --accent-surface-strong: rgba(99, 102, 241, 0.20);
+  --accent-text: #A5AAFC;
 
   /* Surfaces */
-  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(130, 99, 255, 0.08), transparent),
-             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(74, 58, 255, 0.06), transparent),
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 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), #0D0C1E 100%);
   --bg-dark: var(--depth-1);
   --bg-card: hsl(var(--hsl-card));
-  --bg-elevated: hsl(246 38% 18%);
-  --bg-section: hsl(246 38% 9%);
+  --bg-elevated: hsl(246 28% 17%);
+  --bg-section: hsl(246 28% 9%);
   --bg-input: hsl(var(--hsl-input));
-  --bg-hover: rgba(130, 99, 255, 0.08);
-  --bg-selection: rgba(130, 99, 255, 0.18);
+  --bg-hover: rgba(99, 102, 241, 0.08);
+  --bg-selection: rgba(99, 102, 241, 0.18);
 
   /* Text */
   --text-primary: hsl(var(--hsl-foreground));
-  --text-secondary: hsl(244 18% 88%);
-  --text-muted: #8B90B8;
-  --text-dim: #6B70A0;
-
-  /* Brand accents — Tangle exact */
-  --brand-primary: #4a3aff;
-  --brand-strong: #3B2ECC;
-  --brand-cool: #8263FF;
-  --brand-glow: #6D6AFF;
-  --brand-purple: #A78FFF;
-  --brand-vibrant: #4a3aff;
-  --brand-emerald: #10b981;
+  --text-secondary: hsl(240 16% 85%);
+  --text-muted: #8688B0;
+  --text-dim: #606294;
+
+  /* Brand accents — Tangle */
+  --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: #C7D2FE;
+  --brand-vibrant: #6366F1;
+  --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(100, 100, 148, 0.10);
+  --border-default: rgba(100, 100, 148, 0.18);
+  --border-hover: rgba(100, 100, 148, 0.28);
+  --border-accent: rgba(99, 102, 241, 0.18);
+  --border-accent-hover: rgba(99, 102, 241, 0.35);
 
   /* Buttons */
-  --btn-primary-bg: #4a3aff;
-  --btn-primary-hover: #5B4DFF;
-  --btn-cta-bg: #8263FF;
+  --btn-primary-bg: #6366F1;
+  --btn-primary-hover: #818CF8;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #818CF8;
   --btn-cta-text: #FFFFFF;
 
   /* Code / runtime syntax */
-  --code-keyword: #A78FFF;
-  --code-string: #10b981;
+  --code-keyword: #A5AAFC;
+  --code-string: #34D399;
   --code-function: #6D9FFF;
   --code-number: #FFB347;
-  --code-success: #10b981;
-  --code-comment: #6B7094;
+  --code-success: #10B981;
+  --code-comment: #606294;
   --code-error: #FF4D6D;
 
   /* Shadows */
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
   --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
-  --shadow-glow: 0 0 32px rgba(130, 99, 255, 0.18);
-  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(130, 99, 255, 0.2);
+  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
+  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
   --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
-  --shadow-status-creating: 0 0 6px rgba(130, 99, 255, 0.5);
+  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
   --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
 
   /* Radii */
@@ -227,7 +241,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 +268,17 @@
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
 
+  /* Syntax highlighting — override per-theme in vault section */
+  --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;
@@ -251,68 +290,87 @@
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
-[data-sandbox-theme="builder"] {
-  --hsl-primary: 247 100% 61%;
-  --brand-primary: #4a3aff;
-  --brand-cool: #6D9FFF;
-  --brand-glow: #4a3aff;
-  --tangle-gradient: linear-gradient(135deg, #4a3aff, #6D9FFF);
-  --accent-gradient-strong: linear-gradient(135deg, #4a3aff, #6D9FFF);
-  --status-creating: #4a3aff;
-}
-
-[data-sandbox-theme="consumer"] {
-  --hsl-background: 246 44% 8%;
-  --hsl-card: 246 36% 13%;
-  --hsl-input: 246 30% 16%;
-  --hsl-primary: 160 84% 39%;
-  --hsl-ring: 160 84% 39%;
-  --brand-primary: #10b981;
-  --brand-cool: #10b981;
-  --brand-glow: #34D399;
-  --tangle-gradient: linear-gradient(135deg, #10b981, #34D399);
-  --accent-gradient-strong: linear-gradient(135deg, #10b981, #34D399);
-  --accent-text: #34D399;
-  --btn-primary-bg: #10b981;
-  --btn-primary-hover: #0EA572;
-}
-
 [data-sandbox-theme="vault"] {
-  /* Light theme — clean navy/emerald */
-  --hsl-background: 210 17% 97%;
-  --hsl-foreground: 210 20% 10%;
+  /* Light theme — clean professional, warm purple accents */
+
+  /* MD3 surface hierarchy */
+  --md3-surface: #f8f9fb;
+  --md3-surface-dim: #d9dae0;
+  --md3-surface-bright: #f8f9fb;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f3f4f7;
+  --md3-surface-container: #edeef2;
+  --md3-surface-container-high: #e7e8ed;
+  --md3-surface-container-highest: #e1e2e8;
+  --md3-surface-variant: #e1e2e8;
+  --md3-on-surface: #191c24;
+  --md3-on-surface-variant: #464858;
+
+  --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: #6B6E8A;
+  --md3-outline-variant: #C7C6D6;
+
+  --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;
+
+  /* Semantic HSL bridge */
+  --hsl-background: 225 20% 97%;
+  --hsl-foreground: 228 20% 12%;
   --hsl-card: 0 0% 100%;
-  --hsl-card-foreground: 210 20% 10%;
+  --hsl-card-foreground: 228 20% 12%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 210 20% 10%;
-  --hsl-primary: 248 100% 35%;
+  --hsl-popover-foreground: 228 20% 12%;
+  --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 152 100% 22%;
+  --hsl-secondary: 242 22% 42%;
   --hsl-secondary-foreground: 0 0% 100%;
-  --hsl-muted: 210 14% 95%;
-  --hsl-muted-foreground: 215 10% 40%;
-  --hsl-accent: 210 20% 94%;
-  --hsl-accent-foreground: 210 20% 10%;
+  --hsl-muted: 240 14% 89%;
+  --hsl-muted-foreground: 240 10% 36%;
+  --hsl-accent: 248 22% 86%;
+  --hsl-accent-foreground: 248 38% 30%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 214 18% 88%;
-  --hsl-input: 214 18% 90%;
-  --hsl-ring: 248 100% 35%;
-  --hsl-success: 152 82% 34%;
+  --hsl-border: 244 14% 78%;
+  --hsl-input: 244 12% 80%;
+  --hsl-ring: 239 84% 67%;
+  --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
 
-  --depth-1: #f8f9fa;
-  --depth-2: #f2f3f5;
-  --depth-3: #e8eaed;
-  --depth-4: #dde0e5;
+  --depth-1: #f4f4f9;
+  --depth-2: #edecf4;
+  --depth-3: #e5e4ee;
+  --depth-4: #dcdbe8;
 
-  --status-running: #2C8C86;
-  --status-creating: #3B2ECC;
+  --status-running: #059669;
+  --status-creating: #3E349E;
   --status-stopped: #B45309;
   --status-warm: #C05621;
   --status-cold: #1D6FA4;
-  --status-error: #C81E34;
+  --status-error: #ba1a1a;
   --status-deleted: #6B6B82;
 
   --glass-bg: var(--depth-2);
@@ -336,9 +394,9 @@
   --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-violet-bg: #F0EEFF;
+  --surface-violet-border: #C5C0F0;
+  --surface-violet-text: #3E349E;
   --surface-orange-bg: #fff7ed;
   --surface-orange-border: #fed7aa;
   --surface-orange-text: #c2410c;
@@ -347,94 +405,88 @@
   --surface-neutral-text: var(--text-muted);
 
   /* Sidebar — light */
-  --sidebar-background: 210 17% 97%;
-  --sidebar-foreground: 210 20% 10%;
-  --sidebar-primary: 248 100% 35%;
+  --sidebar-background: 232 18% 96%;
+  --sidebar-foreground: 228 20% 12%;
+  --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 210 20% 92%;
-  --sidebar-accent-foreground: 210 20% 10%;
-  --sidebar-border: 214 18% 88%;
-  --sidebar-ring: 248 100% 35%;
+  --sidebar-accent: 240 18% 90%;
+  --sidebar-accent-foreground: 240 38% 30%;
+  --sidebar-border: 244 14% 78%;
+  --sidebar-ring: 239 84% 67%;
 
-  --mesh-teal: rgba(44, 140, 134, 0.04);
-  --mesh-violet: rgba(74, 58, 255, 0.03);
-  --mesh-blue: rgba(29, 111, 164, 0.03);
+  --mesh-teal: rgba(5, 150, 105, 0.04);
+  --mesh-violet: rgba(99, 102, 241, 0.03);
+  --mesh-blue: rgba(129, 140, 248, 0.03);
 
-  --bg-root: #f8f9fa;
-  --bg-dark: #f2f3f5;
+  --bg-root: #f4f4f9;
+  --bg-dark: #edecf4;
   --bg-card: #ffffff;
-  --bg-elevated: #ebedf0;
-  --bg-section: #f2f3f5;
-  --bg-input: #f0f1f4;
-  --bg-hover: rgba(74, 58, 255, 0.05);
-  --bg-selection: rgba(74, 58, 255, 0.08);
-
-  --text-primary: #0F1133;
-  --text-secondary: #2A2D4A;
-  --text-muted: #6B7094;
-  --text-dim: #9DA3C2;
-
-  --brand-primary: #1e116e;
-  --brand-strong: #211f54;
-  --brand-cool: #4a3aff;
-  --brand-glow: #8263FF;
-  --brand-purple: #4a3aff;
-  --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);
-
-  --btn-primary-bg: #1e116e;
-  --btn-primary-hover: #211f54;
-  --btn-cta-bg: #4a3aff;
+  --bg-elevated: #e5e4ee;
+  --bg-section: #edecf4;
+  --bg-input: #edecf4;
+  --bg-hover: rgba(99, 102, 241, 0.05);
+  --bg-selection: rgba(99, 102, 241, 0.10);
+
+  --text-primary: #191c24;
+  --text-secondary: #3a3a50;
+  --text-muted: #5E5E7A;
+  --text-dim: #A0A0B8;
+
+  --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(110, 108, 148, 0.20);
+  --border-default: rgba(110, 108, 148, 0.35);
+  --border-hover: rgba(110, 108, 148, 0.50);
+  --border-accent: rgba(99, 102, 241, 0.15);
+  --border-accent-hover: rgba(99, 102, 241, 0.30);
+
+  --btn-primary-bg: #6366F1;
+  --btn-primary-hover: #4F46E5;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #6366F1;
   --btn-cta-text: #ffffff;
 
-  --code-keyword: #1e116e;
-  --code-string: #10b981;
-  --code-function: #1e116e;
+  --code-keyword: #3E349E;
+  --code-string: #059669;
+  --code-function: #352B88;
   --code-number: #B45309;
-  --code-success: #10b981;
-  --code-comment: #6B7094;
-  --code-error: #C81E34;
-
-  --shadow-card: 0 1px 4px rgba(15, 17, 51, 0.06), 0 0 0 1px rgba(15, 17, 51, 0.05);
-  --shadow-dropdown: 0 8px 32px rgba(15, 17, 51, 0.10), 0 0 0 1px rgba(15, 17, 51, 0.06);
-  --shadow-glow: 0 0 32px rgba(74, 58, 255, 0.10);
-  --shadow-accent: 0 2px 8px rgba(74, 58, 255, 0.12), 0 0 0 1px rgba(74, 58, 255, 0.08);
-
-  --tangle-gradient: linear-gradient(135deg, #1e116e, #4a3aff);
-  --tangle-gradient-text: linear-gradient(135deg, #1e116e, #4a3aff);
-  --accent-gradient-strong: linear-gradient(135deg, #1e116e, #4a3aff);
-  --accent-surface-soft: rgba(74, 58, 255, 0.06);
-  --accent-surface-strong: rgba(74, 58, 255, 0.12);
-  --accent-text: #1e116e;
-
-  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Outfit", "Geist", sans-serif;
+  --code-success: #059669;
+  --code-comment: #6B6E8A;
+  --code-error: #ba1a1a;
+
+  --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
+  --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
+  --shadow-glow: none;
+  --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
+
+  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
+  --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
+  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
+  --accent-surface-soft: rgba(99, 102, 241, 0.06);
+  --accent-surface-strong: rgba(99, 102, 241, 0.12);
+  --accent-text: #4F46E5;
+
+  /* Typography — Manrope (headlines) + Inter (body/labels) */
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Manrope", "Inter", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
-}
 
-[data-density="compact"] {
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --control-height: 2rem;
-  --panel-padding: 0.625rem;
-
-  --code-padding-x: 0.625rem;
-  --code-padding-y: 0.5rem;
-  --code-font-size: 0.75rem;
-  --code-line-height: 1.4;
-  --chat-message-px: 0.75rem;
-  --chat-message-py: 0.375rem;
-  --chat-input-py: 0.5rem;
-  --card-padding: 1rem;
-  --tool-card-px: 0.625rem;
-  --tool-card-py: 0.375rem;
-  --tool-icon-size: 1.5rem;
+  /* Tighter border radius for enterprise precision */
+  --radius: 0.375rem;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-pill: 999px;
+  --radius-full: 999px;
 }
+

package/dist/{usage-chart-XCoB_7Xu.d.ts → usage-chart-SSiOgeQI.d.ts}

@@ -35,6 +35,8 @@ interface PricingTier {
     features: string[];
     recommended?: boolean;
     creditsPerMonth?: number;
+    monthlyPriceId?: string;
+    yearlyPriceId?: string;
 }
 interface PricingPageProps {
     tiers: PricingTier[];
@@ -47,7 +49,7 @@ interface PricingPageProps {
     className?: string;
     cardClassName?: string;
 }
-declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, className, cardClassName, }: PricingPageProps): react_jsx_runtime.JSX.Element;
+declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className, }: PricingPageProps): react_jsx_runtime.JSX.Element;
 
 interface UsageDataPoint {
     date: string;