@yuva-devlab/tokens 1.0.0 → 1.1.0

package/README.md

@@ -1,48 +1,21 @@
-# 🎨 @yuva-devlab/tokens
+# @yuva-devlab/tokens
 
-[![npm version](https://img.shields.io/npm/v/@yuva-devlab/tokens.svg)](https://www.npmjs.com/package/@yuva-devlab/tokens)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-
-> Tailwind CSS 4 preset and design token theme bridge for the Yuva DevLab Design System.
-
-## Features
-
-- 🎨 **Tailwind CSS 4 Preset** - Native `@theme inline` mappings bridging tokens to Tailwind utilities
-- 🌓 **Modern OKLCH Color Tokens** - Clean, perceptual contrast in light and dark modes
-- 🚀 **Zero-Config Theming** - Drop-in theme presets for applications (FinAI, OrchestrAI)
-- 🎯 **Pure CSS** - Zero runtime overhead and zero JS dependencies
+Design tokens, color themes, and Tailwind CSS 4 preset bridge for the Yuva DevLab ecosystem.
 
 ## Installation
 
 ```bash
-# npm
-npm install @yuva-devlab/tokens
-
-# yarn
-yarn add @yuva-devlab/tokens
-
-# pnpm
 pnpm add @yuva-devlab/tokens
 ```
 
-## Usage with Tailwind CSS 4
+## Usage
+
+### Tailwind CSS 4 Preset
 
-In your application's global CSS (e.g. `globals.css`):
+In your root stylesheet:
 
 ```css
 @import "tailwindcss";
 @import "@yuva-devlab/tokens/preset.css";
-
-/* Include your target app theme */
-@import "@yuva-devlab/tokens/themes/finai.css";
-/* or @import "@yuva-devlab/tokens/themes/orchestrai.css"; */
+@import "@yuva-devlab/tokens/themes/orchestrai.css";
 ```
-
-## Available Themes
-
-- `@yuva-devlab/tokens/themes/finai.css`: Emerald & forest-green palette optimized for financial clarity and trust.
-- `@yuva-devlab/tokens/themes/orchestrai.css`: Modern high-contrast tech palette for orchestration dashboards.
-
-## License
-
-MIT © Yuva Devlab

package/dist/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+// src/index.ts
+var THEMES = ["orchestrai", "finai"];
+var BRAND_MODES = ["light", "dark"];
+var THEME_CONFIGS = {
+  orchestrai: {
+    name: "orchestrai",
+    defaultMode: "dark",
+    label: "OrchestrAI"
+  },
+  finai: {
+    name: "finai",
+    defaultMode: "dark",
+    label: "FinAI"
+  }
+};
+
+exports.BRAND_MODES = BRAND_MODES;
+exports.THEMES = THEMES;
+exports.THEME_CONFIGS = THEME_CONFIGS;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.cjs","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n} as const;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+/**
+ * @file src/index.ts
+ * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
+ */
+declare const THEMES: readonly ["orchestrai", "finai"];
+type ThemeName = (typeof THEMES)[number];
+declare const BRAND_MODES: readonly ["light", "dark"];
+type BrandMode = (typeof BRAND_MODES)[number];
+interface ThemeConfig {
+    readonly name: ThemeName;
+    readonly defaultMode: BrandMode;
+    readonly label: string;
+}
+declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
+
+export { BRAND_MODES, type BrandMode, THEMES, THEME_CONFIGS, type ThemeConfig, type ThemeName };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file src/index.ts
+ * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
+ */
+declare const THEMES: readonly ["orchestrai", "finai"];
+type ThemeName = (typeof THEMES)[number];
+declare const BRAND_MODES: readonly ["light", "dark"];
+type BrandMode = (typeof BRAND_MODES)[number];
+interface ThemeConfig {
+    readonly name: ThemeName;
+    readonly defaultMode: BrandMode;
+    readonly label: string;
+}
+declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
+
+export { BRAND_MODES, type BrandMode, THEMES, THEME_CONFIGS, type ThemeConfig, type ThemeName };

package/dist/index.js

@@ -0,0 +1,19 @@
+// src/index.ts
+var THEMES = ["orchestrai", "finai"];
+var BRAND_MODES = ["light", "dark"];
+var THEME_CONFIGS = {
+  orchestrai: {
+    name: "orchestrai",
+    defaultMode: "dark",
+    label: "OrchestrAI"
+  },
+  finai: {
+    name: "finai",
+    defaultMode: "dark",
+    label: "FinAI"
+  }
+};
+
+export { BRAND_MODES, THEMES, THEME_CONFIGS };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.js","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n} as const;\n"]}

package/{src → dist}/preset.css

@@ -1,13 +1,13 @@
 /**
  * Yuva DevLab Design System — Tailwind CSS 4 Preset Bridge
- * 
+ *
  * Maps standard design tokens and CSS custom properties to Tailwind utility classes.
- * Can be consumed by any downstream application (e.g. FinAI, OrchestrAI) via:
- * `@import "@yuva-devlab/tokens/preset.css";`
+ * Can be consumed by downstream applications via:
+ * `@import "@yuva-devlab/ui/preset.css";`
  */
 
 @theme inline {
-  /* ── Radii Mappings ──────────────────────────────────────────────────────── */
+  /* ── Radii Mappings ─────────────────────────────────────────────── */
   --radius-sm: calc(var(--radius, 0.5rem) - 4px);
   --radius-md: calc(var(--radius, 0.5rem) - 2px);
   --radius-lg: var(--radius, 0.5rem);
@@ -16,7 +16,7 @@
   --radius-3xl: calc(var(--radius, 0.5rem) + 12px);
   --radius-4xl: calc(var(--radius, 0.5rem) + 16px);
 
-  /* ── Semantic Color Tokens ────────────────────────────────────────────────── */
+  /* ── Semantic Color Tokens ─────────────────────────────────────── */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -37,12 +37,20 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  /* ── Contextual System Colors ────────────────────────────────────────────── */
+  /* ── Contextual System Colors ──────────────────────────────────── */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-overlay: var(--overlay);
 
-  /* ── Navigation & Sidebar ────────────────────────────────────────────────── */
+  /* ── Glass / Surface Tokens ───────────────────────────────────── */
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+
+  /* ── Navigation & Sidebar ──────────────────────────────────────── */
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -52,21 +60,21 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* ── Visual Data Telemetry (Charts) ──────────────────────────────────────── */
+  /* ── Visual Data Telemetry (Charts) ──────────────────────────────── */
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
-  /* ── Component Control Dimensions ────────────────────────────────────────── */
+  /* ── Component Control Dimensions ─────────────────────────────────── */
   --height-control-xs: var(--control-height-xs, 1.75rem);
   --height-control-sm: var(--control-height-sm, 2rem);
   --height-control-md: var(--control-height-md, 2.25rem);
   --height-control-lg: var(--control-height-lg, 2.5rem);
   --height-control-xl: var(--control-height-xl, 3rem);
 
-  /* ── Icon Sizing Tokens ──────────────────────────────────────────────────── */
+  /* ── Icon Sizing Tokens ───────────────────────────────────────────── */
   --size-icon-xs: var(--icon-xs, 0.875rem);
   --size-icon-sm: var(--icon-sm, 1rem);
   --size-icon-md: var(--icon-md, 1.25rem);
@@ -74,7 +82,7 @@
   --size-icon-xl: var(--icon-xl, 2rem);
 }
 
-/* ── Cybernetic Grid & Graph Topologies ────────────────────────────────────── */
+/* ── Cybernetic Grid & Graph Topologies ──────────────────────────────────── */
 @utility execution-grid {
   background-image:
     linear-gradient(var(--border) 1px, transparent 1px),
@@ -99,7 +107,41 @@
   );
 }
 
-/* ── Live Agent Telemetry Animations ───────────────────────────────────────── */
+/* ── Glass Morphism Utility ────────────────────────────────────────────── */
+@utility glass {
+  background-color: var(--surface);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border: 1px solid var(--border);
+}
+
+/* ── Mesh Background Gradient ─────────────────────────────────────────── */
+@utility mesh-bg {
+  background-image:
+    radial-gradient(
+      60rem 30rem at 12% -10%,
+      color-mix(in oklch, var(--primary) 16%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      50rem 26rem at 95% 0%,
+      color-mix(in oklch, var(--info) 14%, transparent),
+      transparent 70%
+    );
+}
+
+/* ── Text Gradient Utility ─────────────────────────────────────────────── */
+@utility text-gradient {
+  background-image: linear-gradient(
+    100deg,
+    var(--foreground) 10%,
+    color-mix(in oklch, var(--primary) 85%, var(--foreground)) 60%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+/* ── Live Agent Telemetry Animations ─────────────────────────────────────── */
 @utility animate-agent-pulse {
   animation: agent-pulse 1.8s ease-in-out infinite;
 }
@@ -116,6 +158,20 @@
   animation: runner-enter 260ms ease-out both;
 }
 
+/* ── Pulse Ring Animation (status indicator) ───────────────────────────── */
+@utility pulse-dot {
+  animation: pulse-ring 1.8s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 45%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
 @keyframes agent-pulse {
   0%,
   100% {
@@ -157,3 +213,42 @@
     transform: translateY(0);
   }
 }
+
+/* ── Sonner Toast Semantic Feedback Styles ────────────────────────────────── */
+[data-sonner-toaster] [data-sonner-toast] {
+  border-radius: var(--radius-md, 0.375rem);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="success"] {
+  border-color: color-mix(in oklch, var(--success) 35%, transparent);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="success"] [data-icon] {
+  color: var(--success);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="error"],
+[data-sonner-toaster] [data-sonner-toast][data-type="destructive"] {
+  border-color: color-mix(in oklch, var(--destructive) 35%, transparent);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon],
+[data-sonner-toaster] [data-sonner-toast][data-type="destructive"] [data-icon] {
+  color: var(--destructive);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="warning"] {
+  border-color: color-mix(in oklch, var(--warning) 35%, transparent);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="warning"] [data-icon] {
+  color: var(--warning);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="info"] {
+  border-color: color-mix(in oklch, var(--info) 35%, transparent);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-type="info"] [data-icon] {
+  color: var(--info);
+}

package/dist/root.css

@@ -0,0 +1,91 @@
+/**
+ * @file src/styles/root.css
+ * @description Baseline normalizations, CSS variables, and interactive element resets.
+ * Pure CSS — zero Tailwind dependency.
+ */
+
+@layer dl-base {
+  /* ── Interactive Cursors ───────────────────────────────────────────── */
+  button,
+  a,
+  select,
+  summary,
+  [role="button"],
+  [role="tab"],
+  [type="button"],
+  [type="submit"],
+  [type="reset"] {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  a[aria-disabled="true"],
+  [aria-disabled="true"],
+  [type="button"]:disabled,
+  [type="submit"]:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ── Interactive Focus Normalization ───────────────────────────────── */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* ── Text Selection ────────────────────────────────────────────────── */
+  ::selection {
+    background: color-mix(in oklab, var(--primary) 28%, transparent);
+  }
+
+  /* ── Scrollbars ────────────────────────────────────────────────────── */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 9999px;
+  }
+
+  /* ── Form Typography Inheritance ───────────────────────────────────── */
+  button,
+  input,
+  select,
+  textarea {
+    letter-spacing: 0;
+    font-family: inherit;
+  }
+
+  /*
+   * Radix Select — Item relative positioning anchor.
+   * Ensures stacking context for the indicator (absolute right-2).
+   */
+  [role="option"] {
+    position: relative;
+  }
+
+  /*
+   * Breadcrumb Separator SVG Sizing
+   */
+  [data-slot="breadcrumb-separator"] svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* ── Reduced Motion ────────────────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/styles.css

@@ -0,0 +1,12 @@
+/**
+ * @file src/styles/styles.css
+ * @description Master stylesheet for @yuva-devlab/tokens.
+ * Contains base CSS custom properties, theme definitions, and design tokens.
+ */
+
+/* ── Base Normalization & Design Tokens ──────────────────────────────────── */
+@import "./root.css";
+
+/* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
+@import "./themes/finai.css";
+@import "./themes/orchestrai.css";

package/{src/themes/theme-finai.css → dist/themes/finai.css}

@@ -4,6 +4,7 @@
  */
 
 :root,
+[data-brand="finai"],
 [data-theme="finai"] {
   --radius: 0.75rem;
   --background: oklch(0.985 0.001 247);
@@ -72,7 +73,10 @@
 }
 
 .dark,
-[data-theme="finai-dark"] {
+[data-theme="dark"],
+[data-theme="finai-dark"],
+[data-brand="finai"].dark,
+[data-brand="finai"][data-theme="dark"] {
   --background: oklch(0.16 0.015 260);
   --foreground: oklch(0.97 0.003 260);
   --card: oklch(0.2 0.015 260);

package/dist/themes/orchestrai.css

@@ -0,0 +1,197 @@
+/**
+ * OrchestrAI Theme — Lovable UI Blue/Teal Palette
+ *
+ * Derived from orchestrai-src/src/styles.css (the official Lovable-sourced design).
+ * Uses OKLCH color space with both light and dark mode support.
+ * Hue axis: ~195–250 (blue-teal spectrum), primary at hue 205 (light) / 195 (dark).
+ * Fonts are intentionally NOT set here; they are managed by the consuming app
+ * (Manrope / Sora / JetBrains Mono for the robotic-technical feel).
+ */
+
+/* ── Light Mode ────────────────────────────────────────────────────────── */
+:root,
+[data-brand="orchestrai"],
+[data-theme="orchestrai"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.985 0.004 210);
+  --foreground: oklch(0.21 0.02 245);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.02 245);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.02 245);
+
+  /* Brand */
+  --primary: oklch(0.58 0.126 205);
+  --primary-foreground: oklch(0.99 0.005 200);
+  --secondary: oklch(0.955 0.008 220);
+  --secondary-foreground: oklch(0.28 0.02 245);
+
+  /* Muted / Accent */
+  --muted: oklch(0.955 0.008 220);
+  --muted-foreground: oklch(0.52 0.02 245);
+  --accent: oklch(0.93 0.035 200);
+  --accent-foreground: oklch(0.28 0.04 220);
+
+  /* Status (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
+  --destructive: oklch(68% 0.18 25);
+  --destructive-foreground: oklch(0.99 0.005 200);
+  --success: oklch(74% 0.14 160);
+  --success-foreground: oklch(0.18 0.02 240);
+  --warning: oklch(81% 0.14 80);
+  --warning-foreground: oklch(0.2 0.03 80);
+  --info: oklch(72% 0.12 255);
+  --info-foreground: oklch(0.18 0.02 240);
+
+  /* Form / Ring */
+  --border: oklch(0.9 0.01 230);
+  --input: oklch(0.9 0.01 230);
+  --ring: oklch(0.58 0.126 205);
+
+  /* Glass surfaces */
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.006 220);
+  --overlay: oklch(0.985 0.004 210 / 80%);
+
+  /* Charts */
+  --chart-1: oklch(0.58 0.126 205);
+  --chart-2: oklch(0.62 0.13 158);
+  --chart-3: oklch(0.6 0.12 250);
+  --chart-4: oklch(0.75 0.14 75);
+  --chart-5: oklch(0.6 0.16 15);
+
+  /* Sidebar */
+  --sidebar: oklch(0.99 0.004 220);
+  --sidebar-foreground: oklch(0.21 0.02 245);
+  --sidebar-primary: oklch(0.58 0.126 205);
+  --sidebar-primary-foreground: oklch(0.99 0.005 200);
+  --sidebar-accent: oklch(0.95 0.012 220);
+  --sidebar-accent-foreground: oklch(0.24 0.02 245);
+  --sidebar-border: oklch(0.9 0.01 230);
+  --sidebar-ring: oklch(0.58 0.126 205);
+
+  /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2rem;
+  --control-height-md: 2.25rem;
+  --control-height-lg: 2.5rem;
+  --control-height-xl: 3rem;
+
+  --icon-xs: 0.875rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-lg: 1.5rem;
+  --icon-xl: 2rem;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --card-padding: var(--space-4);
+  --dialog-padding: var(--space-5);
+  --form-field-gap: var(--space-3);
+  --section-gap: var(--space-5);
+  --table-row-padding-x: var(--space-4);
+  --table-row-padding-y: var(--space-3);
+}
+
+/* ── Dark Mode ────────────────────────────────────────────────────────── */
+.dark,
+[data-theme="dark"],
+[data-brand="orchestrai"].dark,
+[data-brand="orchestrai"][data-theme="dark"],
+[data-theme="orchestrai-dark"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.175 0.015 250);
+  --foreground: oklch(0.955 0.006 230);
+  --card: oklch(0.215 0.017 250);
+  --card-foreground: oklch(0.955 0.006 230);
+  --popover: oklch(0.22 0.018 250);
+  --popover-foreground: oklch(0.955 0.006 230);
+
+  /* Brand */
+  --primary: oklch(0.76 0.115 195);
+  --primary-foreground: oklch(0.19 0.02 240);
+  --secondary: oklch(0.27 0.02 250);
+  --secondary-foreground: oklch(0.945 0.006 230);
+
+  /* Muted / Accent */
+  --muted: oklch(0.27 0.02 250);
+  --muted-foreground: oklch(0.71 0.02 240);
+  --accent: oklch(0.31 0.035 210);
+  --accent-foreground: oklch(0.95 0.01 210);
+
+  /* Status (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
+  --destructive: oklch(68% 0.18 25);
+  --destructive-foreground: oklch(0.18 0.02 240);
+  --success: oklch(74% 0.14 160);
+  --success-foreground: oklch(0.18 0.02 240);
+  --warning: oklch(81% 0.14 80);
+  --warning-foreground: oklch(0.2 0.03 80);
+  --info: oklch(72% 0.12 255);
+  --info-foreground: oklch(0.18 0.02 240);
+
+  /* Form / Ring */
+  --border: oklch(1 0 0 / 11%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.76 0.115 195);
+
+  /* Glass surfaces */
+  --surface: oklch(0.24 0.018 250 / 70%);
+  --surface-2: oklch(0.235 0.018 250);
+  --overlay: oklch(0.11 0.008 250 / 80%);
+
+  /* Charts */
+  --chart-1: oklch(0.76 0.115 195);
+  --chart-2: oklch(0.74 0.14 160);
+  --chart-3: oklch(0.72 0.12 255);
+  --chart-4: oklch(0.81 0.14 80);
+  --chart-5: oklch(0.7 0.16 15);
+
+  /* Sidebar */
+  --sidebar: oklch(0.195 0.016 250);
+  --sidebar-foreground: oklch(0.955 0.006 230);
+  --sidebar-primary: oklch(0.76 0.115 195);
+  --sidebar-primary-foreground: oklch(0.19 0.02 240);
+  --sidebar-accent: oklch(0.28 0.022 250);
+  --sidebar-accent-foreground: oklch(0.95 0.006 230);
+  --sidebar-border: oklch(1 0 0 / 11%);
+  --sidebar-ring: oklch(0.76 0.115 195);
+
+  /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2rem;
+  --control-height-md: 2.25rem;
+  --control-height-lg: 2.5rem;
+  --control-height-xl: 3rem;
+
+  --icon-xs: 0.875rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-lg: 1.5rem;
+  --icon-xl: 2rem;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --card-padding: var(--space-4);
+  --dialog-padding: var(--space-5);
+  --form-field-gap: var(--space-3);
+  --section-gap: var(--space-5);
+  --table-row-padding-x: var(--space-4);
+  --table-row-padding-y: var(--space-3);
+}