@yuva-devlab/tokens 1.1.0 → 1.2.0

package/dist/themes/orchestrai.css

@@ -1,17 +1,16 @@
 /**
  * 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).
+ * Modern OKLCH color spaces optimized for AI intelligence, autonomous agents, and telemetry workflows.
+ * High-specificity scoped tokens for OrchestrAI applications.
  */
 
-/* ── Light Mode ────────────────────────────────────────────────────────── */
-:root,
+/* ── OrchestrAI Theme — Light Mode ─────────────────────────────────────── */
 [data-brand="orchestrai"],
-[data-theme="orchestrai"] {
+[data-theme="orchestrai"],
+[data-theme="orchestrai-light"],
+:root[data-brand="orchestrai"],
+:root[data-theme="orchestrai"],
+:root[data-theme="orchestrai-light"] {
   --radius: 0.75rem;
 
   /* Surfaces */
@@ -34,7 +33,7 @@
   --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) */
+  /* Status */
   --destructive: oklch(68% 0.18 25);
   --destructive-foreground: oklch(0.99 0.005 200);
   --success: oklch(74% 0.14 160);
@@ -49,19 +48,12 @@
   --input: oklch(0.9 0.01 230);
   --ring: oklch(0.58 0.126 205);
 
-  /* Glass surfaces */
+  /* Glass / Surface Tokens */
   --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 */
+  /* Navigation & Sidebar */
   --sidebar: oklch(0.99 0.004 220);
   --sidebar-foreground: oklch(0.21 0.02 245);
   --sidebar-primary: oklch(0.58 0.126 205);
@@ -71,6 +63,13 @@
   --sidebar-border: oklch(0.9 0.01 230);
   --sidebar-ring: oklch(0.58 0.126 205);
 
+  /* Visual Data Telemetry (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);
+
   /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
   --control-height-xs: 1.75rem;
   --control-height-sm: 2rem;
@@ -101,12 +100,21 @@
   --table-row-padding-y: var(--space-3);
 }
 
-/* ── Dark Mode ────────────────────────────────────────────────────────── */
-.dark,
-[data-theme="dark"],
-[data-brand="orchestrai"].dark,
+/* ── OrchestrAI Theme — Dark Mode ──────────────────────────────────────── */
+[data-theme="orchestrai-dark"],
 [data-brand="orchestrai"][data-theme="dark"],
-[data-theme="orchestrai-dark"] {
+[data-brand="orchestrai"][data-theme="orchestrai-dark"],
+[data-brand="orchestrai"].dark,
+[data-brand="orchestrai"] .dark,
+[data-theme="orchestrai"] .dark,
+.dark [data-brand="orchestrai"],
+.dark [data-theme="orchestrai"],
+:root[data-theme="orchestrai-dark"],
+:root[data-brand="orchestrai"].dark,
+:root[data-brand="orchestrai"][data-theme="dark"],
+:root[data-brand="orchestrai"][data-theme="orchestrai-dark"],
+:root.dark[data-brand="orchestrai"],
+:root.dark[data-theme="orchestrai"] {
   --radius: 0.75rem;
 
   /* Surfaces */
@@ -129,7 +137,7 @@
   --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) */
+  /* Status */
   --destructive: oklch(68% 0.18 25);
   --destructive-foreground: oklch(0.18 0.02 240);
   --success: oklch(74% 0.14 160);
@@ -149,14 +157,7 @@
   --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 */
+  /* Navigation & Sidebar */
   --sidebar: oklch(0.195 0.016 250);
   --sidebar-foreground: oklch(0.955 0.006 230);
   --sidebar-primary: oklch(0.76 0.115 195);
@@ -166,6 +167,13 @@
   --sidebar-border: oklch(1 0 0 / 11%);
   --sidebar-ring: oklch(0.76 0.115 195);
 
+  /* Visual Data Telemetry (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);
+
   /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
   --control-height-xs: 1.75rem;
   --control-height-sm: 2rem;

package/dist/themes/portal.css

@@ -0,0 +1,192 @@
+/**
+ * DevLab Portal Theme — Mint / Obsidian Palette
+ * Scoped OKLCH color tokens optimized for identity, IAM, security audit ledger, and control plane workflows.
+ * High-specificity scoped tokens for DevLab Portal applications.
+ */
+
+/* ── DevLab Portal Theme — Light Mode ──────────────────────────────────── */
+[data-brand="portal"],
+[data-theme="portal"],
+[data-theme="portal-light"],
+:root[data-brand="portal"],
+:root[data-theme="portal"],
+:root[data-theme="portal-light"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(97.5% 0.003 170);
+  --foreground: oklch(22% 0.01 170);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(22% 0.01 170);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(22% 0.01 170);
+
+  /* Brand */
+  --primary: oklch(46% 0.115 170);
+  --primary-foreground: oklch(99% 0.005 170);
+  --secondary: oklch(94.5% 0.006 170);
+  --secondary-foreground: oklch(24% 0.01 170);
+
+  /* Muted / Accent */
+  --muted: oklch(94.5% 0.006 170);
+  --muted-foreground: oklch(51% 0.01 170);
+  --accent: oklch(92% 0.012 170);
+  --accent-foreground: oklch(22% 0.01 170);
+
+  /* Status */
+  --destructive: oklch(58% 0.19 25);
+  --destructive-foreground: oklch(99% 0 0);
+  --success: oklch(47% 0.13 166);
+  --success-foreground: oklch(99% 0 0);
+  --warning: oklch(63% 0.13 75);
+  --warning-foreground: oklch(20% 0.03 75);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(99% 0 0);
+
+  /* Form / Ring */
+  --border: oklch(88% 0.007 170);
+  --input: oklch(88% 0.007 170);
+  --ring: oklch(46% 0.115 170);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(100% 0 0 / 80%);
+  --surface-2: oklch(96% 0.004 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.12);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(98% 0.003 170);
+  --sidebar-foreground: oklch(22% 0.01 170);
+  --sidebar-primary: oklch(46% 0.115 170);
+  --sidebar-primary-foreground: oklch(99% 0.005 170);
+  --sidebar-accent: oklch(94% 0.006 170);
+  --sidebar-accent-foreground: oklch(22% 0.01 170);
+  --sidebar-border: oklch(88% 0.007 170);
+  --sidebar-ring: oklch(46% 0.115 170);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(46% 0.115 170);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+
+  /* 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);
+}
+
+/* ── DevLab Portal Theme — Dark Mode ─────────────────────────────────── */
+[data-theme="portal-dark"],
+[data-brand="portal"][data-theme="dark"],
+[data-brand="portal"][data-theme="portal-dark"],
+[data-brand="portal"].dark,
+[data-brand="portal"] .dark,
+[data-theme="portal"] .dark,
+.dark [data-brand="portal"],
+.dark [data-theme="portal"],
+:root[data-theme="portal-dark"],
+:root[data-brand="portal"].dark,
+:root[data-brand="portal"][data-theme="dark"],
+:root[data-brand="portal"][data-theme="portal-dark"],
+:root.dark[data-brand="portal"],
+:root.dark[data-theme="portal"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(16% 0.005 170);
+  --foreground: oklch(94% 0.003 170);
+  --card: oklch(19.7% 0.005 170);
+  --card-foreground: oklch(94% 0.003 170);
+  --popover: oklch(19.7% 0.005 170);
+  --popover-foreground: oklch(94% 0.003 170);
+
+  /* Brand */
+  --primary: oklch(80% 0.13 165);
+  --primary-foreground: oklch(18% 0.035 165);
+  --secondary: oklch(23% 0.005 170);
+  --secondary-foreground: oklch(92% 0.005 170);
+
+  /* Muted / Accent */
+  --muted: oklch(23% 0.005 170);
+  --muted-foreground: oklch(62% 0.008 170);
+  --accent: oklch(26.5% 0.005 170);
+  --accent-foreground: oklch(94% 0.003 170);
+
+  /* Status */
+  --destructive: oklch(72% 0.16 25);
+  --destructive-foreground: oklch(17% 0.02 25);
+  --success: oklch(77% 0.14 165);
+  --success-foreground: oklch(18% 0.03 165);
+  --warning: oklch(80% 0.13 80);
+  --warning-foreground: oklch(20% 0.03 80);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(18% 0.03 260);
+
+  /* Form / Ring */
+  --border: oklch(29% 0.005 170);
+  --input: oklch(29% 0.005 170);
+  --ring: oklch(80% 0.13 165);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(19.7% 0.005 170 / 80%);
+  --surface-2: oklch(23% 0.005 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.35);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(17.5% 0.005 170);
+  --sidebar-foreground: oklch(94% 0.003 170);
+  --sidebar-primary: oklch(80% 0.13 165);
+  --sidebar-primary-foreground: oklch(18% 0.035 165);
+  --sidebar-accent: oklch(24% 0.005 170);
+  --sidebar-accent-foreground: oklch(94% 0.003 170);
+  --sidebar-border: oklch(29% 0.005 170);
+  --sidebar-ring: oklch(80% 0.13 165);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(80% 0.13 165);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuva-devlab/tokens",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Design tokens, brand themes, and Tailwind CSS 4 preset bridge for Yuva DevLab",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,6 +24,8 @@
     "./root.css": "./styles/root.css",
     "./themes/finai.css": "./styles/themes/finai.css",
     "./themes/orchestrai.css": "./styles/themes/orchestrai.css",
+    "./themes/portal.css": "./styles/themes/portal.css",
+    "./themes/logs.css": "./styles/themes/logs.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -41,6 +43,9 @@
     "@yuva-devlab/prettier-config": "0.1.1",
     "@yuva-devlab/typescript-config": "0.1.1"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",

package/styles/preset.css

@@ -2,10 +2,164 @@
  * 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 downstream applications via:
- * `@import "@yuva-devlab/ui/preset.css";`
+ * Acts as the universal preset and neutral baseline when no brands are mapped.
+ * Zero individual brand tokens are declared here.
+ * Can be consumed downstream via: `@import "@yuva-devlab/tokens/preset.css";`
  */
 
+/* ── Neutral Fallback Baseline (Active when no brands are mapped) ─────────── */
+:root {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.18 0.01 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.01 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.01 260);
+
+  /* Core Neutral Action */
+  --primary: oklch(0.35 0.04 260);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.96 0.005 260);
+  --secondary-foreground: oklch(0.2 0.01 260);
+
+  /* Muted / Accent */
+  --muted: oklch(0.96 0.005 260);
+  --muted-foreground: oklch(0.5 0.01 260);
+  --accent: oklch(0.94 0.01 260);
+  --accent-foreground: oklch(0.2 0.01 260);
+
+  /* System Status Feedback */
+  --destructive: oklch(0.6 0.22 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.75 0.14 80);
+  --warning-foreground: oklch(0.2 0.02 80);
+  --success: oklch(0.65 0.15 150);
+  --success-foreground: oklch(0.99 0 0);
+  --info: oklch(0.68 0.13 245);
+  --info-foreground: oklch(0.99 0 0);
+
+  /* Form & Interactive */
+  --border: oklch(0.92 0.005 260);
+  --input: oklch(0.92 0.005 260);
+  --ring: oklch(0.35 0.04 260);
+
+  /* Surfaces & Overlay */
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.005 260);
+  --overlay: oklch(0.985 0 0 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.18 0.01 260);
+  --sidebar-primary: oklch(0.35 0.04 260);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.95 0.01 260);
+  --sidebar-accent-foreground: oklch(0.2 0.01 260);
+  --sidebar-border: oklch(0.92 0.005 260);
+  --sidebar-ring: oklch(0.35 0.04 260);
+
+  /* Charts */
+  --chart-1: oklch(0.6 0.15 250);
+  --chart-2: oklch(0.65 0.15 150);
+  --chart-3: oklch(0.7 0.12 70);
+  --chart-4: oklch(0.75 0.14 80);
+  --chart-5: oklch(0.6 0.18 25);
+
+  /* Sizing, Spacing & Layout */
+  --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,
+[data-theme="dark"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.16 0.01 260);
+  --foreground: oklch(0.97 0.003 260);
+  --card: oklch(0.2 0.01 260);
+  --card-foreground: oklch(0.97 0.003 260);
+  --popover: oklch(0.2 0.01 260);
+  --popover-foreground: oklch(0.97 0.003 260);
+
+  /* Core Neutral Action */
+  --primary: oklch(0.75 0.05 260);
+  --primary-foreground: oklch(0.15 0.01 260);
+  --secondary: oklch(0.25 0.01 260);
+  --secondary-foreground: oklch(0.97 0.003 260);
+
+  /* Muted / Accent */
+  --muted: oklch(0.25 0.01 260);
+  --muted-foreground: oklch(0.7 0.01 260);
+  --accent: oklch(0.3 0.02 260);
+  --accent-foreground: oklch(0.95 0.005 260);
+
+  /* System Status Feedback */
+  --destructive: oklch(0.65 0.2 25);
+  --destructive-foreground: oklch(0.97 0.003 0);
+  --warning: oklch(0.75 0.14 80);
+  --warning-foreground: oklch(0.15 0.02 80);
+  --success: oklch(0.7 0.15 150);
+  --success-foreground: oklch(0.15 0.01 260);
+  --info: oklch(0.72 0.12 245);
+  --info-foreground: oklch(0.15 0.01 260);
+
+  /* Form & Interactive */
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.75 0.05 260);
+
+  /* Surfaces & Overlay */
+  --surface: oklch(0.22 0.01 260 / 70%);
+  --surface-2: oklch(0.235 0.01 260);
+  --overlay: oklch(0.11 0.01 260 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.18 0.01 260);
+  --sidebar-foreground: oklch(0.97 0.003 260);
+  --sidebar-primary: oklch(0.75 0.05 260);
+  --sidebar-primary-foreground: oklch(0.15 0.01 260);
+  --sidebar-accent: oklch(0.26 0.01 260);
+  --sidebar-accent-foreground: oklch(0.97 0.003 260);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.75 0.05 260);
+
+  /* Charts */
+  --chart-1: oklch(0.7 0.15 250);
+  --chart-2: oklch(0.72 0.15 150);
+  --chart-3: oklch(0.75 0.12 70);
+  --chart-4: oklch(0.8 0.14 80);
+  --chart-5: oklch(0.65 0.18 25);
+}
+
 @theme inline {
   /* ── Radii Mappings ─────────────────────────────────────────────── */
   --radius-sm: calc(var(--radius, 0.5rem) - 4px);

package/styles/styles.css

@@ -10,3 +10,5 @@
 /* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
 @import "./themes/finai.css";
 @import "./themes/orchestrai.css";
+@import "./themes/portal.css";
+@import "./themes/logs.css";

package/styles/themes/finai.css

@@ -1,33 +1,59 @@
 /**
  * FinAI Theme Preset — Emerald / Forest Green Palette
  * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
+ * High-specificity scoped tokens for FinAI applications.
  */
 
-:root,
+/* ── FinAI Theme — Light Mode ─────────────────────────────────────────── */
 [data-brand="finai"],
-[data-theme="finai"] {
+[data-theme="finai"],
+[data-theme="finai-light"],
+:root[data-brand="finai"],
+:root[data-theme="finai"],
+:root[data-theme="finai-light"] {
   --radius: 0.75rem;
+
+  /* Surfaces */
   --background: oklch(0.985 0.001 247);
   --foreground: oklch(0.21 0.02 260);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.21 0.02 260);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.21 0.02 260);
+
+  /* Brand */
   --primary: oklch(0.63 0.14 156);
   --primary-foreground: oklch(0.99 0.005 150);
   --secondary: oklch(0.965 0.003 260);
   --secondary-foreground: oklch(0.21 0.02 260);
+
+  /* Muted / Accent */
   --muted: oklch(0.965 0.003 260);
   --muted-foreground: oklch(0.52 0.015 260);
   --accent: oklch(0.95 0.03 156);
   --accent-foreground: oklch(0.35 0.09 156);
+
+  /* Status */
   --destructive: oklch(0.6 0.22 25);
   --destructive-foreground: oklch(0.99 0.005 0);
   --warning: oklch(0.75 0.14 80);
   --warning-foreground: oklch(0.2 0.02 80);
+  --success: oklch(0.63 0.14 156);
+  --success-foreground: oklch(0.99 0.005 150);
+  --info: oklch(0.68 0.12 245);
+  --info-foreground: oklch(0.99 0.005 245);
+
+  /* Form / Ring */
   --border: oklch(0.92 0.005 260);
   --input: oklch(0.92 0.005 260);
   --ring: oklch(0.63 0.14 156);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.003 260);
+  --overlay: oklch(0.985 0.001 247 / 80%);
+
+  /* Navigation & Sidebar */
   --sidebar: oklch(1 0 0);
   --sidebar-foreground: oklch(0.21 0.02 260);
   --sidebar-primary: oklch(0.63 0.14 156);
@@ -36,12 +62,22 @@
   --sidebar-accent-foreground: oklch(0.35 0.09 156);
   --sidebar-border: oklch(0.93 0.005 260);
   --sidebar-ring: oklch(0.63 0.14 156);
+
+  /* Visual Data Telemetry (Charts) */
   --chart-1: oklch(0.63 0.14 156);
   --chart-2: oklch(0.55 0.02 260);
   --chart-3: oklch(0.75 0.04 156);
   --chart-4: oklch(0.7 0.15 60);
   --chart-5: oklch(0.6 0.18 25);
 
+  /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
+  --income: var(--primary);
+  --income-foreground: var(--primary-foreground);
+  --expense: var(--destructive);
+  --expense-foreground: var(--destructive-foreground);
+  --investment: oklch(0.62 0.19 260);
+  --investment-foreground: oklch(0.99 0.005 260);
+
   /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
   --control-height-xs: 1.75rem;
   --control-height-sm: 2rem;
@@ -72,32 +108,64 @@
   --table-row-padding-y: var(--space-4);
 }
 
-.dark,
-[data-theme="dark"],
+/* ── FinAI Theme — Dark Mode ──────────────────────────────────────────── */
 [data-theme="finai-dark"],
+[data-brand="finai"][data-theme="dark"],
+[data-brand="finai"][data-theme="finai-dark"],
 [data-brand="finai"].dark,
-[data-brand="finai"][data-theme="dark"] {
+[data-brand="finai"] .dark,
+[data-theme="finai"] .dark,
+.dark [data-brand="finai"],
+.dark [data-theme="finai"],
+:root[data-theme="finai-dark"],
+:root[data-brand="finai"].dark,
+:root[data-brand="finai"][data-theme="dark"],
+:root[data-brand="finai"][data-theme="finai-dark"],
+:root.dark[data-brand="finai"],
+:root.dark[data-theme="finai"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
   --background: oklch(0.16 0.015 260);
   --foreground: oklch(0.97 0.003 260);
   --card: oklch(0.2 0.015 260);
   --card-foreground: oklch(0.97 0.003 260);
   --popover: oklch(0.2 0.015 260);
   --popover-foreground: oklch(0.97 0.003 260);
+
+  /* Brand */
   --primary: oklch(0.7 0.15 156);
   --primary-foreground: oklch(0.15 0.02 260);
   --secondary: oklch(0.25 0.015 260);
   --secondary-foreground: oklch(0.97 0.003 260);
+
+  /* Muted / Accent */
   --muted: oklch(0.25 0.015 260);
   --muted-foreground: oklch(0.7 0.01 260);
   --accent: oklch(0.3 0.05 156);
   --accent-foreground: oklch(0.9 0.08 156);
+
+  /* Status */
   --destructive: oklch(0.65 0.2 25);
   --destructive-foreground: oklch(0.97 0.003 0);
   --warning: oklch(0.75 0.14 80);
   --warning-foreground: oklch(0.15 0.02 80);
+  --success: oklch(0.7 0.15 156);
+  --success-foreground: oklch(0.15 0.02 260);
+  --info: oklch(0.72 0.12 245);
+  --info-foreground: oklch(0.15 0.02 260);
+
+  /* Form / Ring */
   --border: oklch(1 0 0 / 8%);
   --input: oklch(1 0 0 / 12%);
   --ring: oklch(0.7 0.15 156);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(0.2 0.015 260 / 70%);
+  --surface-2: oklch(0.235 0.015 260);
+  --overlay: oklch(0.12 0.015 260 / 80%);
+
+  /* Navigation & Sidebar */
   --sidebar: oklch(0.18 0.015 260);
   --sidebar-foreground: oklch(0.97 0.003 260);
   --sidebar-primary: oklch(0.7 0.15 156);
@@ -106,9 +174,19 @@
   --sidebar-accent-foreground: oklch(0.97 0.003 260);
   --sidebar-border: oklch(1 0 0 / 8%);
   --sidebar-ring: oklch(0.7 0.15 156);
+
+  /* Visual Data Telemetry (Charts) */
   --chart-1: oklch(0.7 0.15 156);
   --chart-2: oklch(0.6 0.02 260);
   --chart-3: oklch(0.8 0.04 156);
   --chart-4: oklch(0.75 0.15 60);
   --chart-5: oklch(0.65 0.2 25);
+
+  /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
+  --income: var(--primary);
+  --income-foreground: var(--primary-foreground);
+  --expense: var(--destructive);
+  --expense-foreground: var(--destructive-foreground);
+  --investment: oklch(0.68 0.19 260);
+  --investment-foreground: oklch(0.97 0.003 260);
 }