impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.9

package/dist/impact-nova-base.scss

@@ -233,8 +233,8 @@
     left: 16px;
     z-index: 99999;
     padding: 8px 16px;
-    background: hsl(var(--primary, 232 83% 60%));
-    color: hsl(var(--primary-foreground, 0 0% 100%));
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
     border-radius: 0 0 6px 6px;
     font-weight: 600;
     font-size: 14px;
@@ -243,13 +243,15 @@
   }
   /* Sidebar buttons — inset focus ring via ::after pseudo-element */
   [data-sidebar="menu-button"],
-  [data-sidebar="menu-sub-button"] {
+  [data-sidebar="menu-sub-button"],
+  [data-sidebar="trigger"] {
     position: relative;
   }
 
   [data-sidebar="content"] [data-sidebar="menu-button"]:focus-visible,
   [data-sidebar="content"] [data-sidebar="menu-sub-button"]:focus-visible,
-  [data-sidebar="footer"] [data-sidebar="menu-button"]:focus-visible {
+  [data-sidebar="footer"] [data-sidebar="menu-button"]:focus-visible,
+  [data-sidebar="trigger"]:focus-visible {
     outline: none !important;
     box-shadow: none !important;
     --tw-ring-shadow: none !important;
@@ -258,7 +260,8 @@
   [data-sidebar="content"] [data-sidebar="menu-button"]:focus-visible::after,
   [data-sidebar="content"]
     [data-sidebar="menu-sub-button"]:focus-visible::after,
-  [data-sidebar="footer"] [data-sidebar="menu-button"]:focus-visible::after {
+  [data-sidebar="footer"] [data-sidebar="menu-button"]:focus-visible::after,
+  [data-sidebar="trigger"]:focus-visible::after {
     content: "";
     position: absolute;
     inset: 2px;

package/dist/impact-nova-components.css

@@ -449,8 +449,8 @@
   border: none;
   border-radius: 8px;
   overflow: hidden;
-  background-color: var(--ag-tooltip-background-color, #1f2b4d);
-  color: var(--ag-tooltip-text-color, #ffffff);
+  background-color: var(--ag-tooltip-background-color, var(--color-foreground));
+  color: var(--ag-tooltip-text-color, var(--color-primary-foreground));
   font: 400 14px/20px;
   font-weight: 400;
   font-family: 'Manrope', sans-serif !important;

package/dist/impact-nova-tokens.scss

@@ -1,136 +1,126 @@
 @layer base {
   :root {
-    /* —— Canvas & default content —— */
+    /* —— Canvas & default content / surfaces —— */
     --color-background: #ffffff;
-    --color-foreground: #1f2b4d;
-
-    /* —— Surfaces (elevation / layering) —— */
+    --color-surface-accordion: #b3bdf8;
+    --color-surface-canvas: #f2f4fa;
     --color-surface-elevated: #ffffff;
     --color-surface-elevated-foreground: #1f2b4d;
     --color-surface-floating: #ffffff;
     --color-surface-floating-foreground: #1f2b4d;
-    --color-surface-muted: #f5f6fa;
-    --color-surface-canvas: #f2f4fa;
     --color-surface-input-disabled: #f2f4fa;
+    --color-surface-muted: #f5f6fa;
     --color-surface-readonly: #f5f6fa;
-    --color-surface-tint-blue: #eff2fa;
-    --color-surface-accordion: #b3bdf8;
     --color-surface-selection-tint: #eceefd;
     --color-surface-subtle: #f8f9fb;
+    --color-surface-tint-blue: #eff2fa;
 
     /* —— Brand & interactive —— */
-    /* #4259EE */
+    --color-accent: #eceefd;
+    --color-accent-foreground: #29399f;
+    --color-muted: #d9dde7;
+    --color-muted-foreground: #415ca4;
     --color-primary: #4259ee;
     --color-primary-foreground: #ffffff;
-    --color-primary-strong: #29399f;
     --color-primary-hover: #3649c6;
-    --color-primary-surface-subtle: #eff2fa;
     --color-primary-on-surface-subtle: #5167f5;
     --color-primary-selection: #eceefd;
-    /* IA DS #ECEEFD — aligned with --color-accent (hover / highlight surface) */
     --color-primary-soft: #eceefd;
     --color-primary-soft-hover: #d5dafb;
+    --color-primary-strong: #29399f;
+    --color-primary-surface-subtle: #eff2fa;
     --color-primary-variant: #4459e4;
     --color-primary-variant-hover: #3347c7;
-    /* Not Figma Violet — use --color-header-badge-gradient-from for header Beta badge */
-
     --color-secondary: #f5f6fa;
     --color-secondary-foreground: #60697d;
     --color-secondary-hover-foreground: #3649c6;
 
-    /* Hover / selection tint — IA DS #ECEEFD (was ~#EDEFFC at 232 75% 96%) */
-    --color-accent: #eceefd;
-    --color-accent-foreground: #29399f;
-
-    --color-muted: #d9dde7;
-    --color-muted-foreground: #415ca4;
-
-    /* —— Content tone scale (labels, placeholders, icons) —— */
-    --color-foreground-secondary: #5f687c;
-    --color-foreground-tertiary: #646a78;
-    --color-foreground-placeholder: #b4bac7;
+    /* —— Content tone scale —— */
+    --color-foreground: #1f2b4d;
     --color-foreground-empty: #dfe2e7;
     --color-foreground-icon: #7a8294;
-    /* Header notification bell (default); hover uses --color-foreground via text-content */
+    --color-foreground-placeholder: #b4bac7;
+    --color-foreground-secondary: #5f687c;
+    --color-foreground-tertiary: #646a78;
+    --color-foreground-title: #0d152c;
     --color-header-notification-icon: #60697d;
-
-    /* Header bot button animated gradient stops */
-    --color-header-bot-gradient-teal: #2ac2aa;
-    --color-header-bot-gradient-indigo: #6666ef;
-    --color-header-bot-gradient-orange: #f26922;
-    --color-header-bot-gradient-purple: #8863c0;
-    --color-header-bot-gradient-navy: #0f1937;
-    --color-header-bot-gradient-teal-hover: #2ac2ee;
-    --color-header-bot-gradient-indigo-hover: #6962ef;
-    --color-header-bot-gradient-orange-hover: #f26921;
-
-    /* Header title badge — Figma Violet/500 → Primary (Item Smart “Beta” pill) */
-    --color-header-badge-gradient-from: #be77ee;
-    --color-header-badge-gradient-to: var(--color-primary);
-
-    // --color-secondary: #31416E;
-
-    --color-neutral-charcoal: #41536c;
     --color-neutral-badge: #5f6572;
+    --color-neutral-charcoal: #41536c;
 
     /* —— Borders & focus —— */
     --color-border: #d9dde7;
-    --color-border-subtle: #ebebef;
-    --color-border-tertiary: #c5c9d3;
-    --color-border-hairline: #e3e5ed;
-    --color-border-strong: #c5c9d3;
     --color-border-accent-muted: #b3bdf8;
-    /* Figma purple scale 500 — AG Grid header group alternating border (odd) */
     --color-border-grid-header-group-purple: #ad97ce;
-    /* AG Grid pinned total / summary rows */
+    --color-border-hairline: #e3e5ed;
+    --color-border-strong: #c5c9d3;
+    --color-border-subtle: #ebebef;
+    --color-border-tertiary: #c5c9d3;
     --color-grid-pinned-row-background: #f4f1f9;
     --color-input: #d9dde7;
     --color-ring: #1f2b4d;
 
     /* —— Forms & validation —— */
-    --color-disabled-surface: #f8f9fb;
-    --color-disabled-foreground: #b4bac7;
-    --color-disabled-border: #dcdee5;
-    --color-danger-validation: #e05452;
     --color-danger-bright: #ef4444;
+    --color-danger-validation: #e05452;
+    --color-disabled-border: #dcdee5;
+    --color-disabled-foreground: #b4bac7;
+    --color-disabled-surface: #f8f9fb;
 
-    /* —— Badge (IA DS v3.1 — Figma alert-badge) —— */
-    /* Filled/outline “Information” #5267F4 — not global brand / links (#4259EE). */
-    --color-badge-info-filled: #5267f4;
-    --color-badge-neutral-muted: #f1f2f3;
-    --color-badge-info-muted: #eff2fa;
-    --color-badge-warning-filled: #ffe875;
-    --color-badge-warning-muted: #fdfae8;
-    --color-badge-warning-text: #8e7306;
+    /* —— Badge (IA DS v3.1) —— */
     --color-badge-error-filled: #ec4b58;
     --color-badge-error-muted: #fef6f7;
     --color-badge-error-text: #d6312e;
+    --color-badge-info-filled: #5267f4;
+    --color-badge-info-muted: #eff2fa;
+    --color-badge-neutral-muted: #f1f2f3;
     --color-badge-success-filled: #108431;
     --color-badge-success-muted: #f5fff8;
     --color-badge-success-text: #108431;
+    --color-badge-warning-filled: #ffe875;
+    --color-badge-warning-muted: #fdfae8;
+    --color-badge-warning-text: #8e7306;
 
-    /* —— Button (IA DS v3.1 — primary disabled) —— */
-    /* #C3C8D4 — solid fill when Type=Primary, State=Disabled */
+    /* —— Component-specific —— */
     --color-button-primary-disabled: #c3c8d4;
+    --color-header-badge-gradient-from: #be77ee;
+    --color-header-badge-gradient-to: var(--color-primary);
+    --color-header-bot-gradient-indigo: #6666ef;
+    --color-header-bot-gradient-indigo-hover: #6962ef;
+    --color-header-bot-gradient-navy: #0f1937;
+    --color-header-bot-gradient-orange: #f26922;
+    --color-header-bot-gradient-orange-hover: #f26921;
+    --color-header-bot-gradient-purple: #8863c0;
+    --color-header-bot-gradient-teal: #2ac2aa;
+    --color-header-bot-gradient-teal-hover: #2ac2ee;
+    --color-indicator-filter: #687af1;
+    --color-indicator-sort: #ae57ea;
+    --color-pin-switch-label-active: #1f2b4d;
+    --color-pin-switch-label-inactive: #60697d;
+    --color-pin-switch-track-bg: #f5f6fa;
+    --color-pin-switch-track-border: #eff2fa;
+    --color-pin-switch-track-hover: #ebedf5;
+    --color-tab-active-border: #4259ee;
+    --color-tab-active-foreground: #3649c6;
+    --color-tab-active-surface: #f8f9fb;
+    --color-tab-hover-border: #c6ccf1;
+    --color-tab-hover-foreground: #7a83b8;
+    --color-tab-hover-surface: #f2f3fd;
 
     /* —— Status & feedback —— */
     --color-destructive: #e15554;
-    --color-destructive-hover: #ab3939;
     --color-destructive-foreground: #ffffff;
+    --color-destructive-hover: #ab3939;
+    --color-error-border: #f3c0bf;
+    --color-error-surface: #fceeee;
+    --color-info-border: #c6cdfb;
+    --color-info-surface: #e0f4ff;
     --color-success: #3bb273;
+    --color-success-border: #c4e8d5;
     --color-success-foreground: #ffffff;
+    --color-success-surface: #ebf7f1;
     --color-warning: #e1bc29;
-    --color-info-surface: #e0f4ff;
-    /* Inline alert / feedback outline (#C6CDFB) */
-    --color-info-border: #c6cdfb;
-    --color-warning-surface: #fcf8ea;
-    /* Inline alert / feedback outline (#FFE770) */
     --color-warning-border: #ffe770;
-    --color-error-surface: #fceeee;
-    /* Inline alert / feedback outline (#F3C1C0) */
-    --color-error-border: #f3c0bf;
-    --color-success-surface: #ebf7f1;
-    --color-success-border: #c4e8d5;
+    --color-warning-surface: #fcf8ea;
 
     /* —— Data visualization —— */
     --color-chart-1: #4259ee;
@@ -141,142 +131,309 @@
     --color-data-cohort: #367c3b;
     --color-track-muted: #e8eaed;
 
-    /* —— Column indicators (sort/filter badges in column settings panel) —— */
-    --color-indicator-sort: #ae57ea;
-    --color-indicator-filter: #687af1;
-
-    /* —— Pin switch (column pinning control) —— */
-    --color-pin-switch-label-active: #1f2b4d;
-    --color-pin-switch-label-inactive: #60697d;
-    --color-pin-switch-track-bg: #f5f6fa;
-    --color-pin-switch-track-border: #eff2fa;
-    --color-pin-switch-track-hover: #ebedf5;
-
     /* —— Navigation (sidebar shell) —— */
     --color-sidebar-background: #0f1729;
+    --color-sidebar-border: #1b294b;
+    --color-sidebar-canvas: #f8f9fb;
     --color-sidebar-foreground: #ffffff;
-    --color-sidebar-surface: #0f1729;
-    --color-sidebar-on-surface: #ffffff;
+    --color-sidebar-foreground-muted: #7a8294;
     --color-sidebar-hover: #141f38;
-    --color-sidebar-on-hover: #ffffff;
-    --color-sidebar-border: #1b294b;
-    --color-sidebar-ring: #3b82f6;
     --color-sidebar-indicator: #00ff00;
-    --color-sidebar-item-hover: #303e6e;
     --color-sidebar-item-active: #1f2b4d;
-    --color-sidebar-foreground-muted: #7a8294;
-    --color-sidebar-canvas: #f8f9fb;
-
-    /* —— Tabs (box variant defaults; overridable per-instance via --tab-*) —— */
-    --color-tab-hover-border: #c6ccf1;
-    --color-tab-hover-surface: #f2f3fd;
-    --color-tab-hover-foreground: #7a83b8;
-    --color-tab-active-border: #4259ee;
-    --color-tab-active-surface: #f8f9fb;
-    --color-tab-active-foreground: #3649c6;
+    --color-sidebar-item-hover: #303e6e;
+    --color-sidebar-on-hover: #ffffff;
+    --color-sidebar-on-surface: #ffffff;
+    --color-sidebar-ring: #3b82f6;
+    --color-sidebar-surface: #0f1729;
 
+    /* —— Elevation shadows —— */
+    --shadow-alert-elevated: 0 0 16px 5px rgb(0 0 0 / 0.12);
+    --shadow-elevation-card: 0px 2px 8px 0px rgb(0 0 0 / 5%);
+    --shadow-elevation-dialog-footer: 0 -4px 6px -1px rgb(0 0 0 / 5%);
+    --shadow-elevation-floating: 0px 0px 4px 0px rgb(0 0 0 / 12%);
+    --shadow-elevation-header: 0px 0px 16px 2px rgb(0 0 0 / 6%);
+    --shadow-elevation-kbd-dark: 0 1px 0 0 hsl(0 0% 0% / 0.25);
+    --shadow-elevation-menu-ag-grid: #00000040 0px 0px 2px 0px;
+    --shadow-elevation-pin-switch: 1px 1px 7px 5px rgb(0 0 0 / 6%);
+    --shadow-elevation-select: 0px 1px 6px 0px rgb(26 39 124 / 14%);
+    --shadow-elevation-settings: 0px 0px 2px 0px rgb(0 0 0 / 25%);
+    --shadow-elevation-toast: 0px 10px 30px 0px rgb(0 0 0 / 15%);
+    --shadow-elevation-wizard-footer: 0 -4px 8px -6px rgb(13 21 44 / 8%);
+
+    /* —— Overlay / scrim —— */
+    --color-scrim: hsl(0 0% 0% / 0.4);
+    --color-scrim-deep: hsl(0 0% 0% / 0.8);
+    --color-scrim-hover: hsl(0 0% 0% / 0.05);
+    --color-scrim-light: hsl(0 0% 0% / 0.06);
+    --color-scrim-skeleton: hsl(0 0% 0% / 0.1);
+
+    /* —— Radius —— */
     --radius: 0.5rem;
+    /* —— Chart series palette (6–50; 1–5 are chart-1..chart-5 above) —— */
+    --color-chart-series-06: #d260a6;
+    --color-chart-series-07: #dc6a83;
+    --color-chart-series-08: #e58a76;
+    --color-chart-series-09: #b1711b;
+    --color-chart-series-10: #cac416;
+    --color-chart-series-11: #8dbf36;
+    --color-chart-series-12: #5ed039;
+    --color-chart-series-13: #43db59;
+    --color-chart-series-14: #4ee4a0;
+    --color-chart-series-15: #5aede4;
+    --color-chart-series-16: #80bddb;
+    --color-chart-series-17: #2749a5;
+    --color-chart-series-18: #3724bc;
+    --color-chart-series-19: #7e20d5;
+    --color-chart-series-20: #d523e7;
+    --color-chart-series-21: #ce50a7;
+    --color-chart-series-22: #d85a80;
+    --color-chart-series-23: #e27165;
+    --color-chart-series-24: #eaac71;
+    --color-chart-series-25: #b8a514;
+    --color-chart-series-26: #8caf31;
+    --color-chart-series-27: #60c62f;
+    --color-chart-series-28: #31d83d;
+    --color-chart-series-29: #3ce289;
+    --color-chart-series-30: #47ebd3;
+    --color-chart-series-31: #70bdd7;
+    --color-chart-series-32: #7b9fe0;
+    --color-chart-series-33: #2621ab;
+    --color-chart-series-34: #651dc3;
+    --color-chart-series-35: #bb18dc;
+    --color-chart-series-36: #c940aa;
+    --color-chart-series-37: #d4497e;
+    --color-chart-series-38: #de5554;
+    --color-chart-series-39: #e7975f;
+    --color-chart-series-40: #efd56c;
+    --color-chart-series-41: #899f2d;
+    --color-chart-series-42: #64b62b;
+    --color-chart-series-43: #2ace27;
+    --color-chart-series-44: #2adf6f;
+    --color-chart-series-45: #35e9c0;
+    --color-chart-series-46: #60bfd2;
+    --color-chart-series-47: #6a9cdc;
+    --color-chart-series-48: #767be5;
+    --color-chart-series-49: #501bb1;
+    --color-chart-series-50: #9d16ca;
 
-    /* —— Alert elevation (emphasis) —— */
-    --shadow-alert-elevated: 0 0 16px 5px rgb(0 0 0 / 0.12);
   }
 
   .dark {
-    /* —— Canvas & default content —— */
-    --color-background: #0f1729;
-    --color-foreground: #f8f9fb;
-
-    /* —— Surfaces —— */
-    --color-surface-elevated: #141f38;
-    --color-surface-elevated-foreground: #f8f9fb;
-    --color-surface-floating: #1b294b;
-    --color-surface-floating-foreground: #f8f9fb;
-    --color-surface-muted: #141f38;
-    --color-surface-canvas: #0f1729;
-    --color-surface-input-disabled: #1b294b;
-    --color-surface-readonly: #141f38;
-    --color-surface-tint-blue: #1b294b;
-    --color-surface-accordion: #29399f;
-    --color-surface-selection-tint: #1f2b4d;
-    --color-surface-subtle: #141f38;
+    /* —— Canvas & default content / surfaces —— */
+    --color-background: #0a0a0a;
+    --color-surface-accordion: #262626;
+    --color-surface-canvas: #0a0a0a;
+    --color-surface-elevated: #171717;
+    --color-surface-elevated-foreground: #fafafa;
+    --color-surface-floating: #262626;
+    --color-surface-floating-foreground: #fafafa;
+    --color-surface-input-disabled: #262626;
+    --color-surface-muted: #262626;
+    --color-surface-readonly: #171717;
+    --color-surface-selection-tint: #404040;
+    --color-surface-subtle: #171717;
+    --color-surface-tint-blue: #262626;
 
     /* —— Brand & interactive —— */
-    --color-primary: #5267f4;
-    --color-primary-foreground: #ffffff;
-    --color-primary-strong: #6b7ef7;
-    --color-primary-hover: #6b7ef7;
-    --color-primary-surface-subtle: #1b294b;
-    --color-primary-on-surface-subtle: #8b9af8;
-    --color-primary-selection: #1f2b4d;
-    --color-primary-soft: #1f2b4d;
-    --color-primary-soft-hover: #29399f;
-    --color-primary-variant: #5267f4;
-    --color-primary-variant-hover: #6b7ef7;
-
-    --color-secondary: #141f38;
-    --color-secondary-foreground: #b4bac7;
-    --color-secondary-hover-foreground: #8b9af8;
-
-    --color-accent: #1f2b4d;
-    --color-accent-foreground: #8b9af8;
-
-    --color-muted: #1b294b;
-    --color-muted-foreground: #8b9af8;
+    --color-accent: #404040;
+    --color-accent-foreground: #fafafa;
+    --color-muted: #262626;
+    --color-muted-foreground: #a1a1a1;
+    --color-primary: #e5e5e5;
+    --color-primary-foreground: #171717;
+    --color-primary-hover: #fafafa;
+    --color-primary-on-surface-subtle: #fafafa;
+    --color-primary-selection: #404040;
+    --color-primary-soft: #262626;
+    --color-primary-soft-hover: #404040;
+    --color-primary-strong: #fafafa;
+    --color-primary-surface-subtle: #262626;
+    --color-primary-variant: #e5e5e5;
+    --color-primary-variant-hover: #fafafa;
+    --color-secondary: #262626;
+    --color-secondary-foreground: #fafafa;
+    --color-secondary-hover-foreground: #fafafa;
 
     /* —— Content tone scale —— */
-    --color-foreground-secondary: #b4bac7;
-    --color-foreground-tertiary: #9aa3b5;
-    --color-foreground-placeholder: #60697d;
-    --color-foreground-empty: #41536c;
-    --color-foreground-icon: #9aa3b5;
-    --color-header-notification-icon: #b4bac7;
-
-    --color-header-badge-gradient-from: #be77ee;
-    --color-header-badge-gradient-to: var(--color-primary);
-
-    --color-neutral-charcoal: #b4bac7;
-    --color-neutral-badge: #9aa3b5;
+    --color-foreground: #fafafa;
+    --color-foreground-empty: #737373;
+    --color-foreground-icon: #a1a1a1;
+    --color-foreground-placeholder: #737373;
+    --color-foreground-secondary: #a1a1a1;
+    --color-foreground-tertiary: #737373;
+    --color-foreground-title: #fafafa;
+    --color-header-notification-icon: #a1a1a1;
+    --color-neutral-badge: #a1a1a1;
+    --color-neutral-charcoal: #fafafa;
 
     /* —— Borders & focus —— */
-    --color-border: #1b294b;
-    --color-border-subtle: #141f38;
-    --color-border-tertiary: #29399f;
-    --color-border-hairline: #1b294b;
-    --color-border-strong: #29399f;
-    --color-border-accent-muted: #3649c6;
-    --color-border-grid-header-group-purple: #6b5a8a;
-    --color-grid-pinned-row-background: #1b294b;
-    --color-input: #1b294b;
-    --color-ring: #8b9af8;
+    --color-border: #282828;
+    --color-border-accent-muted: #737373;
+    --color-border-grid-header-group-purple: #525252;
+    --color-border-hairline: #282828;
+    --color-border-strong: #404040;
+    --color-border-subtle: #282828;
+    --color-border-tertiary: #343434;
+    --color-grid-pinned-row-background: #171717;
+    --color-input: #343434;
+    --color-ring: #737373;
 
     /* —— Forms & validation —— */
-    --color-disabled-surface: #141f38;
-    --color-disabled-foreground: #60697d;
-    --color-disabled-border: #1b294b;
-    --color-danger-validation: #f87171;
-    --color-danger-bright: #ef4444;
+    --color-danger-bright: #ff6467;
+    --color-danger-validation: #ff6467;
+    --color-disabled-border: #282828;
+    --color-disabled-foreground: #a1a1a1;
+    --color-disabled-surface: #171717;
+
+    /* —— Badge (IA DS v3.1) —— */
+    --color-badge-error-filled: #ff6467;
+    --color-badge-error-muted: #3f1515;
+    --color-badge-error-text: #ff9a9c;
+    --color-badge-info-filled: #1447e6;
+    --color-badge-info-muted: #172554;
+    --color-badge-neutral-muted: #262626;
+    --color-badge-success-filled: #22c55e;
+    --color-badge-success-muted: #14291f;
+    --color-badge-success-text: #86efac;
+    --color-badge-warning-filled: #f59e0b;
+    --color-badge-warning-muted: #2d2410;
+    --color-badge-warning-text: #fcd34d;
+
+    /* —— Component-specific —— */
+    --color-button-primary-disabled: #404040;
+    --color-header-badge-gradient-from: #1447e6;
+    --color-header-badge-gradient-to: #3a81f6;
+    --color-header-bot-gradient-indigo: #3a81f6;
+    --color-header-bot-gradient-indigo-hover: #91c5ff;
+    --color-header-bot-gradient-navy: #171717;
+    --color-header-bot-gradient-orange: #f97316;
+    --color-header-bot-gradient-orange-hover: #fb923c;
+    --color-header-bot-gradient-purple: #1f3fad;
+    --color-header-bot-gradient-teal: #2dd4bf;
+    --color-header-bot-gradient-teal-hover: #5eead4;
+    --color-indicator-filter: #1447e6;
+    --color-indicator-sort: #1f3fad;
+    --color-pin-switch-label-active: #fafafa;
+    --color-pin-switch-label-inactive: #737373;
+    --color-pin-switch-track-bg: #171717;
+    --color-pin-switch-track-border: #282828;
+    --color-pin-switch-track-hover: #404040;
+    --color-tab-active-border: #fafafa;
+    --color-tab-active-foreground: #fafafa;
+    --color-tab-active-surface: #262626;
+    --color-tab-hover-border: #737373;
+    --color-tab-hover-foreground: #fafafa;
+    --color-tab-hover-surface: #404040;
+
+    /* —— Status & feedback —— */
+    --color-destructive: #ff6467;
+    --color-destructive-foreground: #fafafa;
+    --color-destructive-hover: #ef4444;
+    --color-error-border: #5c2020;
+    --color-error-surface: #2a1212;
+    --color-info-border: #1e3a5f;
+    --color-info-surface: #262626;
+    --color-success: #22c55e;
+    --color-success-border: #14532d;
+    --color-success-foreground: #fafafa;
+    --color-success-surface: #14291f;
+    --color-warning: #f59e0b;
+    --color-warning-border: #422006;
+    --color-warning-surface: #2d2410;
+
+    /* —— Data visualization —— */
+    --color-chart-1: #91c5ff;
+    --color-chart-2: #3a81f6;
+    --color-chart-3: #2563ef;
+    --color-chart-4: #1a4eda;
+    --color-chart-5: #1f3fad;
+    --color-data-cohort: #4ade80;
+    --color-track-muted: #343434;
 
     /* —— Navigation (sidebar shell) —— */
-    --color-sidebar-background: #0a1020;
-    --color-sidebar-foreground: #ffffff;
-    --color-sidebar-surface: #0a1020;
-    --color-sidebar-on-surface: #ffffff;
-    --color-sidebar-hover: #141f38;
-    --color-sidebar-on-hover: #ffffff;
-    --color-sidebar-border: #1b294b;
-    --color-sidebar-ring: #3b82f6;
-    --color-sidebar-indicator: #00ff00;
-    --color-sidebar-item-hover: #29399f;
-    --color-sidebar-item-active: #1f2b4d;
-    --color-sidebar-foreground-muted: #9aa3b5;
-    --color-sidebar-canvas: #0f1729;
+    --color-sidebar-background: #171717;
+    --color-sidebar-border: #282828;
+    --color-sidebar-canvas: #171717;
+    --color-sidebar-foreground: #fafafa;
+    --color-sidebar-foreground-muted: #a1a1a1;
+    --color-sidebar-hover: #262626;
+    --color-sidebar-indicator: #1447e6;
+    --color-sidebar-item-active: #262626;
+    --color-sidebar-item-hover: #404040;
+    --color-sidebar-on-hover: #fafafa;
+    --color-sidebar-on-surface: #fafafa;
+    --color-sidebar-ring: #525252;
+    --color-sidebar-surface: #171717;
+
+    /* —— Elevation shadows —— */
+    --shadow-alert-elevated: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-card: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-dialog-footer: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-floating: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-header: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-kbd-dark: 0 1px 0 0 hsl(0 0% 0% / 0.25);
+    --shadow-elevation-menu-ag-grid: hsl(0 0% 0% / 0.35) 0px 0px 4px 0px;
+    --shadow-elevation-pin-switch: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-select: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-settings: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-toast: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-elevation-wizard-footer: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+
+    /* —— Overlay / scrim —— */
+    --color-scrim: hsl(0 0% 0% / 0.55);
+    --color-scrim-deep: hsl(0 0% 0% / 0.85);
+    --color-scrim-hover: hsl(0 0% 0% / 0.65);
+    --color-scrim-light: hsl(0 0% 0% / 0.35);
+    --color-scrim-skeleton: hsl(0 0% 100% / 0.06);
+
+    /* —— Radius —— */
+    --radius: 0.625rem;
+    /* —— Chart series palette (6–50; 1–5 are chart-1..chart-5 above) —— */
+    --color-chart-series-06: #d260a6;
+    --color-chart-series-07: #dc6a83;
+    --color-chart-series-08: #e58a76;
+    --color-chart-series-09: #b1711b;
+    --color-chart-series-10: #cac416;
+    --color-chart-series-11: #8dbf36;
+    --color-chart-series-12: #5ed039;
+    --color-chart-series-13: #43db59;
+    --color-chart-series-14: #4ee4a0;
+    --color-chart-series-15: #5aede4;
+    --color-chart-series-16: #80bddb;
+    --color-chart-series-17: #2749a5;
+    --color-chart-series-18: #3724bc;
+    --color-chart-series-19: #7e20d5;
+    --color-chart-series-20: #d523e7;
+    --color-chart-series-21: #ce50a7;
+    --color-chart-series-22: #d85a80;
+    --color-chart-series-23: #e27165;
+    --color-chart-series-24: #eaac71;
+    --color-chart-series-25: #b8a514;
+    --color-chart-series-26: #8caf31;
+    --color-chart-series-27: #60c62f;
+    --color-chart-series-28: #31d83d;
+    --color-chart-series-29: #3ce289;
+    --color-chart-series-30: #47ebd3;
+    --color-chart-series-31: #70bdd7;
+    --color-chart-series-32: #7b9fe0;
+    --color-chart-series-33: #2621ab;
+    --color-chart-series-34: #651dc3;
+    --color-chart-series-35: #bb18dc;
+    --color-chart-series-36: #c940aa;
+    --color-chart-series-37: #d4497e;
+    --color-chart-series-38: #de5554;
+    --color-chart-series-39: #e7975f;
+    --color-chart-series-40: #efd56c;
+    --color-chart-series-41: #899f2d;
+    --color-chart-series-42: #64b62b;
+    --color-chart-series-43: #2ace27;
+    --color-chart-series-44: #2adf6f;
+    --color-chart-series-45: #35e9c0;
+    --color-chart-series-46: #60bfd2;
+    --color-chart-series-47: #6a9cdc;
+    --color-chart-series-48: #767be5;
+    --color-chart-series-49: #501bb1;
+    --color-chart-series-50: #9d16ca;
 
-    /* —— Tabs —— */
-    --color-tab-hover-border: #3649c6;
-    --color-tab-hover-surface: #1b294b;
-    --color-tab-hover-foreground: #8b9af8;
-    --color-tab-active-border: #5267f4;
-    --color-tab-active-surface: #141f38;
-    --color-tab-active-foreground: #8b9af8;
   }
 }