@psnext/design-system 1.0.0

package/dist/styles/generated/slingshot-vars.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.theme-slingshot {
+  --brand-neutrals-50: #F9FAFB;
+  --brand-neutrals-100: #F3F4F6;
+  --brand-neutrals-200: #E5E7EB;
+  --brand-neutrals-300: #D1D5DB;
+  --brand-neutrals-400: #9CA3AF;
+  --brand-neutrals-500: #6B7280;
+  --brand-neutrals-600: #4B5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1F2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #FEF2F2;
+  --brand-shades-100: #FFE2E2;
+  --brand-shades-200: #FECACA;
+  --brand-shades-300: #FCA5A5;
+  --brand-shades-400: #F87171;
+  --brand-shades-500: #EF4444;
+  --brand-shades-600: #DC2626;
+  --brand-shades-700: #B91C1C;
+  --brand-shades-800: #991B1B;
+  --brand-shades-900: #7F1D1D;
+  --brand-shades-950: #450A0A;
+  --brand-combinations-1-brand: #EF4444;
+  --brand-combinations-1-brand-foreground: #FFFFFF;
+  --brand-combinations-2-brand: #FECACA;
+  --brand-combinations-2-brand-foreground: #991B1B;
+  --brand-combinations-3-brand: #450A0A;
+  --brand-combinations-3-brand-foreground: #FCA5A5;
+}

package/dist/styles/generated/sustain-vars.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.theme-sustain {
+  --brand-neutrals-50: #F9FAFB;
+  --brand-neutrals-100: #F3F4F6;
+  --brand-neutrals-200: #E5E7EB;
+  --brand-neutrals-300: #D1D5DB;
+  --brand-neutrals-400: #9CA3AF;
+  --brand-neutrals-500: #6B7280;
+  --brand-neutrals-600: #4B5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1F2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #F5F3FF;
+  --brand-shades-100: #EDE9FE;
+  --brand-shades-200: #DDD6FE;
+  --brand-shades-300: #C4B5FD;
+  --brand-shades-400: #A78BFA;
+  --brand-shades-500: #EF4444;
+  --brand-shades-600: #7C3AED;
+  --brand-shades-700: #6D28D9;
+  --brand-shades-800: #5B21B6;
+  --brand-shades-900: #4C1D95;
+  --brand-shades-950: #2E1065;
+  --brand-combinations-1-brand: #EF4444;
+  --brand-combinations-1-brand-foreground: #FFFFFF;
+  --brand-combinations-2-brand: #DDD6FE;
+  --brand-combinations-2-brand-foreground: #5B21B6;
+  --brand-combinations-3-brand: #2E1065;
+  --brand-combinations-3-brand-foreground: #C4B5FD;
+}

package/dist/styles/index.css

@@ -0,0 +1,32 @@
+/* ============================================================
+   @psnext/design-system — main CSS entry
+   Import order matters: tokens before aliases before components.
+
+   Brand themes are NOT imported here — import them separately:
+     @import "@psnext/design-system/styles/themes/slingshot";
+     @import "@psnext/design-system/styles/themes/bodhi";
+     @import "@psnext/design-system/styles/themes/sustain";
+   ============================================================ */
+
+/* 1. Generated color tokens (requires `pnpm tokens:build` first) */
+@import "./generated/light.css";
+@import "./generated/dark.css";
+
+/* 2. Semantic aliases — maps --bg-* / --content-* to --background / --foreground etc. */
+@import "./base/semantic-aliases.css";
+
+/* 3. Raw color scale — full palette referenced by component tokens */
+@import "./base/colors.css";
+
+/* 4. Base tokens */
+@import "./base/fonts.css";
+@import "./base/typography.css";
+@import "./base/spacing.css";
+@import "./base/radius.css";
+@import "./base/elevation.css";
+
+/* 5. Component tokens — badges, toasts, tabs, glass, etc. */
+@import "./base/component-tokens.css";
+
+/* 6. Base reset + keyframes */
+@import "./base/global.css";

package/dist/styles/theme.css

@@ -0,0 +1,65 @@
+/* ============================================================
+   @psnext/design-system — Tailwind v4 theme bridge
+   Maps design-system token CSS vars to Tailwind utility names so
+   semantic utilities (bg-primary, text-muted-foreground, ring-ring,
+   border-input, …) resolve to our tokens and react to theme/brand.
+
+   Usage in a consuming app (or Storybook):
+     @import "tailwindcss";
+     @import "@psnext/design-system/styles";        // token vars
+     @import "@psnext/design-system/styles/theme";   // this bridge
+     @source "../node_modules/@psnext/design-system"; // scan DS classes
+
+   `inline` is required because the values reference other CSS vars
+   that are reassigned at runtime by theme/brand switching.
+   ============================================================ */
+
+@theme inline {
+  /* ── Surfaces ─────────────────────────────────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* ── Interactive ──────────────────────────────────────── */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  /* ── States ───────────────────────────────────────────── */
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* ── UI structure ─────────────────────────────────────── */
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* ── Sidebar / navigation ─────────────────────────────── */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ── Radius (derived from --radius token) ─────────────── */
+  --radius-sm: var(--rounded-sm);
+  --radius-md: var(--rounded-md);
+  --radius-lg: var(--rounded-lg);
+  --radius-xl: var(--rounded-xl);
+
+  /* ── Animations (generate animate-* utilities; keyframes in global.css) ── */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+}

package/dist/styles/themes/bodhi.css

@@ -0,0 +1,166 @@
+/* Bodhi Theme — Blue brand */
+
+.theme-bodhi {
+  --bodhi-primary: var(--color-blue-950);
+  --bodhi-secondary: var(--color-blue-300);
+  --bodhi-accent: var(--color-blue-950);
+  --bodhi-surface: var(--color-slate-50);
+  --bodhi-background: var(--color-white);
+
+  --background: var(--bodhi-background);
+  --foreground: var(--color-gray-950);
+  --card: var(--color-white);
+  --card-foreground: var(--color-gray-950);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-white);
+  --primary: var(--color-gray-950);
+  --primary-foreground: var(--color-gray-50);
+  --secondary: var(--color-gray-100);
+  --secondary-foreground: var(--color-gray-900);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--color-gray-900);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-white);
+  --border: var(--color-gray-200);
+  --input: var(--color-white);
+  --input-background: var(--color-white);
+  --ring: var(--color-gray-300);
+
+  /* Glass morphism — slate tint */
+  --glass-heavy: rgba(248, 250, 252, 0.8);
+  --glass-strong: rgba(248, 250, 252, 0.8);
+  --glass-subtle: rgba(248, 250, 252, 0.3);
+  --glass-light: rgba(248, 250, 252, 0.5);
+  --glass-medium: rgba(226, 232, 240, 0.5);
+
+  --nav-active-bg: var(--color-white);
+  --tile-bg: var(--color-white);
+  --tile-hover-bg: rgba(255, 255, 255, 0.4);
+  --tile-button-bg: var(--color-white);
+  --tile-button-hover-bg: var(--color-gray-900);
+  --tile-button-hover-text: var(--color-gray-50);
+
+  /* Gradient — Bodhi light (blue tint) */
+  --gradient-stop-0: var(--color-slate-200);
+  --gradient-stop-1: var(--bodhi-secondary);
+  --gradient-stop-2: var(--color-slate-200);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--color-gray-50);
+  --sidebar-foreground: var(--color-slate-600);
+  --sidebar-primary: var(--bodhi-primary);
+  --sidebar-primary-foreground: var(--color-white);
+  --sidebar-accent: var(--color-slate-200);
+  --sidebar-accent-foreground: var(--color-slate-800);
+  --sidebar-border: var(--color-slate-200);
+  --sidebar-ring: var(--color-slate-400);
+
+  /* Logo / icon colors */
+  --logo-circle-bg: var(--color-white);
+  --logo-icon-red: var(--color-red-500);
+  --logo-text-dark: var(--color-gray-950);
+
+  --slingshot-primary-red: var(--color-red-500);
+  --slingshot-accent-white: var(--color-white);
+  --slingshot-text-dark: var(--color-gray-950);
+
+  --sustain-primary-red: var(--color-red-500);
+  --sustain-accent-white: var(--color-white);
+  --sustain-text-dark: var(--color-gray-950);
+  --sustain-circle-bg: var(--color-white);
+
+  --psai-primary-red: var(--color-red-500);
+  --psai-accent-white: var(--color-white);
+  --psai-text-dark: var(--color-gray-950);
+}
+
+/* Bodhi Theme — Dark Mode */
+html.theme-bodhi.dark {
+  --bodhi-primary: var(--color-blue-950);
+  --bodhi-secondary: var(--color-blue-950);
+  --bodhi-accent: var(--color-blue-300);
+  --bodhi-surface: var(--color-slate-800);
+  --bodhi-background: var(--color-slate-900);
+
+  --background: var(--bodhi-background);
+  --foreground: var(--color-gray-50);
+  --card: var(--color-gray-800);
+  --card-foreground: var(--color-gray-50);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-gray-50);
+  --primary: var(--color-gray-50);
+  --primary-foreground: var(--color-gray-900);
+  --secondary: var(--color-gray-700);
+  --secondary-foreground: var(--color-gray-50);
+  --muted: var(--color-gray-700);
+  --muted-foreground: var(--color-gray-400);
+  --accent: var(--color-gray-700);
+  --accent-foreground: var(--color-gray-50);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-gray-50);
+  --border: var(--color-gray-700);
+  --input: var(--color-gray-700);
+  --input-background: rgba(255, 255, 255, 0.05);
+  --ring: var(--color-gray-500);
+
+  /* Glass morphism — slate-800 alpha */
+  --glass-heavy: rgba(30, 41, 59, 0.8);
+  --glass-strong: rgba(30, 41, 59, 0.8);
+  --glass-subtle: rgba(30, 41, 59, 0.3);
+  --glass-light: rgba(30, 41, 59, 0.5);
+  --glass-medium: rgba(51, 65, 85, 0.5);
+
+  --nav-active-bg: var(--color-gray-700);
+  --tile-bg: var(--color-gray-800);
+  --tile-hover-bg: rgba(31, 40, 50, 0.4);
+  --tile-button-bg: var(--color-gray-800);
+  --tile-button-hover-bg: var(--color-gray-50);
+  --tile-button-hover-text: var(--color-gray-900);
+
+  /* Gradient — Bodhi dark (deep blue) */
+  --gradient-stop-0: var(--color-gray-950);
+  --gradient-stop-1: var(--color-blue-950);
+  --gradient-stop-2: var(--color-gray-950);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--bodhi-surface);
+  --sidebar-foreground: var(--color-slate-300);
+  --sidebar-primary: var(--bodhi-primary);
+  --sidebar-primary-foreground: var(--color-slate-900);
+  --sidebar-accent: var(--color-slate-700);
+  --sidebar-accent-foreground: var(--color-slate-50);
+  --sidebar-border: var(--color-slate-700);
+  --sidebar-ring: var(--color-slate-500);
+
+  /* Logo / icon colors */
+  --logo-circle-bg: var(--color-neutral-900);
+  --logo-icon-red: var(--color-red-500);
+  --logo-text-dark: var(--color-white);
+
+  --slingshot-primary-red: var(--color-red-500);
+  --slingshot-accent-white: var(--color-gray-200);
+  --slingshot-text-dark: var(--color-gray-950);
+
+  --sustain-primary-red: var(--color-red-500);
+  --sustain-accent-white: var(--color-gray-200);
+  --sustain-text-dark: var(--color-gray-950);
+  --sustain-circle-bg: var(--color-neutral-900);
+
+  --psai-primary-red: var(--color-red-500);
+  --psai-accent-white: var(--color-gray-200);
+  --psai-text-dark: var(--color-white);
+}

package/dist/styles/themes/slingshot.css

@@ -0,0 +1,144 @@
+/* Slingshot Theme — Red brand */
+
+.theme-slingshot {
+  --slingshot-primary: var(--color-red-500);
+  --slingshot-secondary: var(--color-red-200);
+  --slingshot-accent: var(--color-red-500);
+  --slingshot-surface: var(--color-gray-50);
+  --slingshot-background: var(--color-white);
+
+  --background: var(--slingshot-surface);
+  --foreground: var(--color-gray-950);
+  --card: var(--color-white);
+  --card-foreground: var(--color-gray-950);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-white);
+  --primary: var(--color-gray-950);
+  --primary-foreground: var(--color-gray-50);
+  --secondary: var(--color-gray-100);
+  --secondary-foreground: var(--color-gray-900);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--color-gray-900);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-white);
+  --border: var(--color-gray-200);
+  --input: var(--color-white);
+  --input-background: var(--color-white);
+  --ring: var(--color-gray-300);
+
+  /* Glass morphism */
+  --glass-heavy: rgba(255, 255, 255, 0.6);
+  --glass-strong: rgba(255, 255, 255, 0.6);
+  --glass-subtle: rgba(255, 255, 255, 0.2);
+  --glass-light: rgba(255, 255, 255, 0.4);
+  --glass-medium: rgba(255, 255, 255, 0.5);
+
+  --nav-active-bg: var(--color-white);
+  --tile-bg: var(--color-white);
+  --tile-hover-bg: rgba(255, 255, 255, 0.4);
+  --tile-button-bg: var(--color-white);
+  --tile-button-hover-bg: var(--color-gray-900);
+  --tile-button-hover-text: var(--color-gray-50);
+
+  /* Gradient — Slingshot light (red tint) */
+  --gradient-stop-0: var(--color-slate-200);
+  --gradient-stop-1: var(--slingshot-secondary);
+  --gradient-stop-2: var(--color-slate-200);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--color-gray-50);
+  --sidebar-foreground: var(--color-gray-700);
+  --sidebar-primary: var(--color-gray-900);
+  --sidebar-primary-foreground: var(--color-gray-50);
+  --sidebar-accent: var(--color-gray-100);
+  --sidebar-accent-foreground: var(--color-gray-900);
+  --sidebar-border: var(--color-gray-200);
+  --sidebar-ring: var(--color-gray-300);
+
+  /* Charts */
+  --chart-1: var(--slingshot-secondary);
+  --chart-2: var(--slingshot-accent);
+  --chart-3: var(--color-cyan-900);
+  --chart-4: var(--color-amber-400);
+  --chart-5: var(--color-amber-500);
+}
+
+/* Slingshot Theme — Dark Mode */
+html.theme-slingshot.dark {
+  --slingshot-primary: var(--color-red-500);
+  --slingshot-secondary: var(--color-orange-500);
+  --slingshot-accent: var(--color-red-200);
+  --slingshot-surface: var(--color-gray-800);
+  --slingshot-background: var(--color-gray-900);
+
+  --background: var(--slingshot-surface);
+  --foreground: var(--color-gray-50);
+  --card: var(--color-gray-800);
+  --card-foreground: var(--color-gray-50);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-gray-50);
+  --primary: var(--color-gray-50);
+  --primary-foreground: var(--color-gray-900);
+  --secondary: var(--color-gray-700);
+  --secondary-foreground: var(--color-gray-50);
+  --muted: var(--color-gray-700);
+  --muted-foreground: var(--color-gray-400);
+  --accent: var(--color-gray-700);
+  --accent-foreground: var(--color-gray-50);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-gray-50);
+  --border: var(--color-gray-700);
+  --input: var(--color-gray-700);
+  --input-background: rgba(255, 255, 255, 0.05);
+  --ring: var(--color-gray-500);
+
+  /* Glass morphism */
+  --glass-heavy: rgba(31, 40, 50, 0.8);
+  --glass-strong: rgba(31, 40, 50, 0.8);
+  --glass-subtle: rgba(31, 40, 50, 0.3);
+  --glass-light: rgba(31, 40, 50, 0.5);
+  --glass-medium: rgba(55, 65, 81, 0.5);
+
+  --nav-active-bg: var(--color-gray-700);
+  --tile-bg: var(--color-gray-800);
+  --tile-hover-bg: rgba(31, 40, 50, 0.4);
+  --tile-button-bg: var(--color-gray-800);
+  --tile-button-hover-bg: var(--color-gray-50);
+  --tile-button-hover-text: var(--color-gray-900);
+
+  /* Gradient — Slingshot dark (deep red) */
+  --gradient-stop-0: var(--color-gray-950);
+  --gradient-stop-1: var(--color-red-950);
+  --gradient-stop-2: var(--color-gray-950);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--color-gray-800);
+  --sidebar-foreground: var(--color-gray-300);
+  --sidebar-primary: var(--color-gray-50);
+  --sidebar-primary-foreground: var(--color-gray-900);
+  --sidebar-accent: var(--color-gray-700);
+  --sidebar-accent-foreground: var(--color-gray-50);
+  --sidebar-border: var(--color-gray-700);
+  --sidebar-ring: var(--color-gray-500);
+
+  /* Charts */
+  --chart-1: var(--slingshot-secondary);
+  --chart-2: var(--slingshot-accent);
+  --chart-3: var(--color-cyan-900);
+  --chart-4: var(--color-amber-400);
+  --chart-5: var(--color-amber-500);
+}

package/dist/styles/themes/sustain.css

@@ -0,0 +1,130 @@
+/* Sustain Theme — Indigo brand */
+
+.theme-sustain {
+  --sustain-primary: var(--color-indigo-800);
+  --sustain-secondary: var(--color-indigo-300);
+  --sustain-accent: var(--color-indigo-800);
+  --sustain-surface: var(--color-indigo-50);
+  --sustain-background: var(--color-indigo-50);
+
+  --background: var(--sustain-surface);
+  --foreground: var(--color-gray-950);
+  --card: var(--color-white);
+  --card-foreground: var(--color-gray-950);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-white);
+  --primary: var(--color-gray-950);
+  --primary-foreground: var(--color-gray-50);
+  --secondary: var(--color-gray-100);
+  --secondary-foreground: var(--color-gray-900);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--color-gray-900);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-white);
+  --border: var(--color-gray-200);
+  --input: var(--color-white);
+  --input-background: var(--color-white);
+  --ring: var(--color-gray-300);
+
+  /* Glass morphism */
+  --glass-heavy: rgba(255, 255, 255, 0.6);
+  --glass-strong: rgba(255, 255, 255, 0.6);
+  --glass-subtle: rgba(255, 255, 255, 0.2);
+  --glass-light: rgba(255, 255, 255, 0.4);
+  --glass-medium: rgba(255, 255, 255, 0.5);
+
+  --nav-active-bg: var(--color-white);
+  --tile-bg: var(--color-white);
+  --tile-hover-bg: rgba(255, 255, 255, 0.4);
+  --tile-button-bg: var(--color-white);
+  --tile-button-hover-bg: var(--color-gray-900);
+  --tile-button-hover-text: var(--color-gray-50);
+
+  /* Gradient — Sustain light (indigo tint) */
+  --gradient-stop-0: var(--color-slate-200);
+  --gradient-stop-1: var(--sustain-secondary);
+  --gradient-stop-2: var(--color-slate-200);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--color-gray-50);
+  --sidebar-foreground: var(--color-gray-700);
+  --sidebar-primary: var(--color-gray-900);
+  --sidebar-primary-foreground: var(--color-gray-50);
+  --sidebar-accent: var(--color-gray-100);
+  --sidebar-accent-foreground: var(--color-gray-900);
+  --sidebar-border: var(--color-gray-200);
+  --sidebar-ring: var(--color-gray-300);
+}
+
+/* Sustain Theme — Dark Mode */
+html.theme-sustain.dark {
+  --sustain-primary: var(--color-indigo-950);
+  --sustain-secondary: var(--color-indigo-950);
+  --sustain-accent: var(--color-indigo-950);
+  --sustain-surface: var(--color-indigo-950);
+  --sustain-background: var(--color-indigo-950);
+
+  --background: var(--sustain-surface);
+  --foreground: var(--color-gray-50);
+  --card: var(--color-gray-800);
+  --card-foreground: var(--color-gray-50);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--color-gray-50);
+  --primary: var(--color-gray-50);
+  --primary-foreground: var(--color-gray-900);
+  --secondary: var(--color-gray-700);
+  --secondary-foreground: var(--color-gray-50);
+  --muted: var(--color-gray-700);
+  --muted-foreground: var(--color-gray-400);
+  --accent: var(--color-gray-700);
+  --accent-foreground: var(--color-gray-50);
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-gray-50);
+  --border: var(--color-gray-700);
+  --input: var(--color-gray-700);
+  --input-background: rgba(255, 255, 255, 0.05);
+  --ring: var(--color-gray-500);
+
+  /* Glass morphism */
+  --glass-heavy: rgba(31, 40, 50, 0.8);
+  --glass-strong: rgba(31, 40, 50, 0.8);
+  --glass-subtle: rgba(31, 40, 50, 0.3);
+  --glass-light: rgba(31, 40, 50, 0.5);
+  --glass-medium: rgba(55, 65, 81, 0.5);
+
+  --nav-active-bg: var(--color-gray-700);
+  --tile-bg: var(--color-gray-800);
+  --tile-hover-bg: rgba(31, 40, 50, 0.4);
+  --tile-button-bg: var(--color-gray-800);
+  --tile-button-hover-bg: var(--color-gray-50);
+  --tile-button-hover-text: var(--color-gray-900);
+
+  /* Gradient — Sustain dark (deep indigo) */
+  --gradient-stop-0: var(--color-gray-950);
+  --gradient-stop-1: var(--sustain-primary);
+  --gradient-stop-2: var(--color-gray-950);
+  --radial-gradient-bg: radial-gradient(
+    circle at 90% 10%,
+    var(--gradient-stop-0) 0%,
+    var(--gradient-stop-1) 25%,
+    var(--gradient-stop-2) 60%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--color-gray-800);
+  --sidebar-foreground: var(--color-gray-300);
+  --sidebar-primary: var(--color-gray-50);
+  --sidebar-primary-foreground: var(--color-gray-900);
+  --sidebar-accent: var(--color-gray-700);
+  --sidebar-accent-foreground: var(--color-gray-50);
+  --sidebar-border: var(--color-gray-700);
+  --sidebar-ring: var(--color-gray-500);
+}