@mdigital_ui/ui 0.3.1 → 0.3.3

package/dist/styles/themes/dark.css

@@ -0,0 +1,93 @@
+/**
+ * Dark Theme
+ * Dark mode with light text on dark background
+ */
+
+:root.dark,
+.dark,
+:root[data-theme='dark'],
+[data-theme='dark'] {
+  /* ============================================
+     COLOR PRIMITIVES (same in both themes)
+     ============================================ */
+
+  /* === COLOR PRIMITIVES === */
+  --color-white: oklch(100% 0 0);
+  --color-black: oklch(0% 0 0);
+
+  /* === GRAY SCALE === */
+  --color-gray-50: oklch(98% 0 0);
+  --color-gray-100: oklch(96% 0 0);
+  --color-gray-200: oklch(92% 0 0);
+  --color-gray-300: oklch(87% 0 0);
+  --color-gray-400: oklch(71% 0 0);
+  --color-gray-500: oklch(55% 0 0);
+  --color-gray-600: oklch(45% 0 0);
+  --color-gray-700: oklch(35% 0 0);
+  --color-gray-800: oklch(25% 0 0);
+  --color-gray-900: oklch(15% 0 0);
+  --color-gray-950: oklch(10% 0 0);
+
+  /* === BRAND COLORS (DARK) === */
+  --color-primary: oklch(70% 0.19 255);
+  --color-primary-hover: oklch(75% 0.21 255);
+  --color-primary-active: oklch(78% 0.23 255);
+  --color-primary-foreground: oklch(15% 0 0);
+
+  --color-secondary: oklch(68% 0.12 260);
+  --color-secondary-hover: oklch(72% 0.14 260);
+  --color-secondary-active: oklch(76% 0.16 260);
+  --color-secondary-foreground: oklch(15% 0 0);
+
+  --color-accent: oklch(75% 0.18 140);
+  --color-accent-hover: oklch(78% 0.2 140);
+  --color-accent-active: oklch(82% 0.22 140);
+  --color-accent-foreground: oklch(15% 0 0);
+
+  /* === SEMANTIC COLORS (DARK) === */
+  --color-success: oklch(72% 0.18 150);
+  --color-success-hover: oklch(76% 0.2 150);
+  --color-success-active: oklch(80% 0.22 150);
+  --color-success-foreground: oklch(15% 0 0);
+
+  --color-error: oklch(70% 0.22 25);
+  --color-error-hover: oklch(74% 0.24 25);
+  --color-error-active: oklch(78% 0.26 25);
+  --color-error-foreground: oklch(15% 0 0);
+
+  --color-warning: oklch(78% 0.16 75);
+  --color-warning-hover: oklch(82% 0.18 75);
+  --color-warning-active: oklch(85% 0.2 75);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  --color-info: oklch(72% 0.16 230);
+  --color-info-hover: oklch(76% 0.18 230);
+  --color-info-active: oklch(80% 0.2 230);
+  --color-info-foreground: oklch(15% 0 0);
+
+  /* === BACKGROUND & SURFACE (DARK) === */
+  --color-background: oklch(17% 0.01 240);
+  --color-background-secondary: oklch(20% 0.01 240);
+  --color-surface: oklch(23% 0.01 240);
+  --color-border: oklch(32% 0.01 240);
+  --color-border-primary: oklch(42% 0.02 240);
+
+  /* === TEXT COLORS (DARK) === */
+  --color-text-primary: oklch(96% 0 0);
+  --color-text-secondary: oklch(75% 0 0);
+  --color-text-muted: oklch(60% 0 0);
+
+  /* === INPUT (DARK) === */
+  --color-input-border: oklch(32% 0.01 240);
+  --color-input-border-focus: oklch(70% 0.19 255);
+  --color-input-border-error: oklch(70% 0.22 25);
+  --color-input-bg: oklch(20% 0.01 240);
+  --color-input-text: oklch(96% 0 0);
+  --color-input-placeholder: oklch(60% 0 0);
+
+  /* === OVERLAYS & EFFECTS (DARK) === */
+  --overlay-stripe: oklch(0% 0 0 / 0.2);
+
+  /* NOTE: Component sizing tokens (card, modal, badge, etc.) inherit from global.css
+     and do not need dark mode overrides. Only color-related tokens are overridden here. */
+}

package/dist/styles/themes/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Theme System
+ *
+ * Centralized exports for all theme-related functionality
+ *
+ * @module themes
+ */
+export * from './presets';
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,WAAW,CAAA"}

package/dist/styles/themes/light.css

@@ -0,0 +1,89 @@
+/**
+ * Light Theme
+ * Default theme with light background and dark text
+ */
+
+:root,
+:root[data-theme='light'],
+[data-theme='light'] {
+  /* ============================================
+     COLOR PRIMITIVES
+     ============================================ */
+
+  /* === COLOR PRIMITIVES === */
+  --color-white: oklch(100% 0 0);
+  --color-black: oklch(0% 0 0);
+
+  /* === GRAY SCALE === */
+  --color-gray-50: oklch(98% 0 0);
+  --color-gray-100: oklch(96% 0 0);
+  --color-gray-200: oklch(92% 0 0);
+  --color-gray-300: oklch(87% 0 0);
+  --color-gray-400: oklch(71% 0 0);
+  --color-gray-500: oklch(55% 0 0);
+  --color-gray-600: oklch(45% 0 0);
+  --color-gray-700: oklch(35% 0 0);
+  --color-gray-800: oklch(25% 0 0);
+  --color-gray-900: oklch(15% 0 0);
+  --color-gray-950: oklch(10% 0 0);
+
+  /* === BRAND COLORS === */
+  --color-primary: oklch(60.29% 0.15 239.2065);
+  --color-primary-hover: oklch(50.29% 0.2 239.2065);
+  --color-primary-active: oklch(45.29% 0.2 239.2065);
+  --color-primary-foreground: oklch(100% 0 0);
+
+  --color-secondary: oklch(50% 0.05 240);
+  --color-secondary-hover: oklch(45% 0.06 240);
+  --color-secondary-active: oklch(40% 0.07 240);
+  --color-secondary-foreground: oklch(100% 0 0);
+
+  --color-accent: oklch(80% 0.1737 67);
+  --color-accent-hover: oklch(75% 0.237 67);
+  --color-accent-active: oklch(70% 0.1937 67);
+  --color-accent-foreground: oklch(15% 0 0);
+
+  /* === SEMANTIC COLORS === */
+  --color-success: oklch(70% 0.2 145);
+  --color-success-hover: oklch(65% 0.22 145);
+  --color-success-active: oklch(50% 0.24 145);
+  --color-success-foreground: oklch(100% 0 0);
+
+  --color-error: oklch(65% 0.2 25);
+  --color-error-hover: oklch(75% 0.2 25);
+  --color-error-active: oklch(80% 0.2 25);
+  --color-error-foreground: oklch(100% 0 0);
+
+  --color-warning: oklch(75% 0.15 85);
+  --color-warning-hover: oklch(70% 0.17 85);
+  --color-warning-active: oklch(65% 0.19 85);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  --color-info: oklch(60% 0.19 255);
+  --color-info-hover: oklch(55% 0.21 255);
+  --color-info-active: oklch(50% 0.23 255);
+  --color-info-foreground: oklch(100% 0 0);
+
+  /* === BACKGROUND & SURFACE === */
+  --color-background: oklch(100% 0 0);
+  --color-background-secondary: oklch(98% 0 0);
+  --color-surface: oklch(96% 0 0);
+  --color-border: oklch(93% 0 0);
+  --color-border-primary: oklch(85% 0 0);
+
+  /* === TEXT COLORS === */
+  --color-text-primary: oklch(15% 0 0);
+  --color-text-secondary: oklch(45% 0 0);
+  --color-text-muted: oklch(60% 0 0);
+
+  /* === INPUT SPECIFIC === */
+  --color-input-border: oklch(87% 0 0);
+  --color-input-border-focus: oklch(55% 0.25 255);
+  --color-input-border-error: oklch(60% 0.25 25);
+  --color-input-bg: oklch(100% 0 0);
+  --color-input-text: oklch(15% 0 0);
+  --color-input-placeholder: oklch(60% 0 0);
+
+  /* === OVERLAYS & EFFECTS === */
+  --overlay-stripe: oklch(100% 0 0 / 0.15);
+}

package/dist/styles/themes/presets/corporate.css

@@ -0,0 +1,126 @@
+/**
+ * Corporate Theme Preset
+ * Professional navy blue palette for business applications
+ * Clean, trustworthy, enterprise-ready
+ */
+
+html[data-theme="corporate"],
+:root[data-theme="corporate"] {
+  /* === BRAND COLORS (LIGHT) === */
+  --color-primary: oklch(40% 0.18 250);
+  --color-primary-hover: oklch(35% 0.20 250);
+  --color-primary-active: oklch(30% 0.22 250);
+  --color-primary-foreground: oklch(100% 0 0);
+
+  --color-secondary: oklch(45% 0.12 220);
+  --color-secondary-hover: oklch(40% 0.14 220);
+  --color-secondary-active: oklch(35% 0.16 220);
+  --color-secondary-foreground: oklch(100% 0 0);
+
+  --color-accent: oklch(55% 0.20 200);
+  --color-accent-hover: oklch(50% 0.22 200);
+  --color-accent-active: oklch(45% 0.24 200);
+  --color-accent-foreground: oklch(100% 0 0);
+
+  /* === SEMANTIC COLORS (LIGHT) === */
+  --color-success: oklch(48% 0.18 160);
+  --color-success-hover: oklch(43% 0.20 160);
+  --color-success-active: oklch(38% 0.22 160);
+  --color-success-foreground: oklch(100% 0 0);
+
+  --color-error: oklch(52% 0.22 25);
+  --color-error-hover: oklch(47% 0.24 25);
+  --color-error-active: oklch(42% 0.26 25);
+  --color-error-foreground: oklch(100% 0 0);
+
+  --color-warning: oklch(65% 0.18 65);
+  --color-warning-hover: oklch(60% 0.20 65);
+  --color-warning-active: oklch(55% 0.22 65);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  --color-info: oklch(50% 0.18 250);
+  --color-info-hover: oklch(45% 0.20 250);
+  --color-info-active: oklch(40% 0.22 250);
+  --color-info-foreground: oklch(100% 0 0);
+
+  /* === BACKGROUND & SURFACE (LIGHT) === */
+  --color-background: oklch(99% 0.005 250);
+  --color-background-secondary: oklch(97% 0.008 250);
+  --color-surface: oklch(95% 0.01 250);
+  --color-card: oklch(100% 0 0);
+  --color-border: oklch(88% 0.015 250);
+  --color-border-primary: oklch(80% 0.02 250);
+
+  /* === TEXT COLORS (LIGHT) === */
+  --color-text-primary: oklch(20% 0.02 250);
+  --color-text-secondary: oklch(40% 0.015 250);
+  --color-text-muted: oklch(55% 0.01 250);
+
+  /* === INPUT (LIGHT) === */
+  --color-input-border: oklch(85% 0.015 250);
+  --color-input-border-focus: oklch(40% 0.18 250);
+  --color-input-border-error: oklch(52% 0.22 25);
+  --color-input-bg: oklch(100% 0 0);
+}
+
+html[data-theme="corporate"].dark,
+:root[data-theme="corporate"].dark,
+html[data-theme="corporate"] .dark,
+[data-theme="corporate"].dark,
+[data-theme="corporate"] .dark {
+  /* === BRAND COLORS (DARK) === */
+  --color-primary: oklch(62% 0.18 250);
+  --color-primary-hover: oklch(67% 0.20 250);
+  --color-primary-active: oklch(72% 0.22 250);
+  --color-primary-foreground: oklch(10% 0 0);
+
+  --color-secondary: oklch(58% 0.14 220);
+  --color-secondary-hover: oklch(63% 0.16 220);
+  --color-secondary-active: oklch(68% 0.18 220);
+  --color-secondary-foreground: oklch(10% 0 0);
+
+  --color-accent: oklch(65% 0.20 200);
+  --color-accent-hover: oklch(70% 0.22 200);
+  --color-accent-active: oklch(75% 0.24 200);
+  --color-accent-foreground: oklch(10% 0 0);
+
+  /* === SEMANTIC COLORS (DARK) === */
+  --color-success: oklch(65% 0.18 160);
+  --color-success-hover: oklch(70% 0.20 160);
+  --color-success-active: oklch(75% 0.22 160);
+  --color-success-foreground: oklch(10% 0 0);
+
+  --color-error: oklch(68% 0.22 25);
+  --color-error-hover: oklch(73% 0.24 25);
+  --color-error-active: oklch(78% 0.26 25);
+  --color-error-foreground: oklch(10% 0 0);
+
+  --color-warning: oklch(75% 0.18 65);
+  --color-warning-hover: oklch(80% 0.20 65);
+  --color-warning-active: oklch(85% 0.22 65);
+  --color-warning-foreground: oklch(10% 0 0);
+
+  --color-info: oklch(68% 0.18 250);
+  --color-info-hover: oklch(73% 0.20 250);
+  --color-info-active: oklch(78% 0.22 250);
+  --color-info-foreground: oklch(10% 0 0);
+
+  /* === BACKGROUND & SURFACE (DARK) === */
+  --color-background: oklch(14% 0.02 250);
+  --color-background-secondary: oklch(17% 0.02 250);
+  --color-surface: oklch(20% 0.025 250);
+  --color-card: oklch(18% 0.02 250);
+  --color-border: oklch(28% 0.03 250);
+  --color-border-primary: oklch(38% 0.04 250);
+
+  /* === TEXT COLORS (DARK) === */
+  --color-text-primary: oklch(95% 0.01 250);
+  --color-text-secondary: oklch(75% 0.01 250);
+  --color-text-muted: oklch(55% 0.01 250);
+
+  /* === INPUT (DARK) === */
+  --color-input-border: oklch(30% 0.03 250);
+  --color-input-border-focus: oklch(62% 0.18 250);
+  --color-input-border-error: oklch(68% 0.22 25);
+  --color-input-bg: oklch(16% 0.02 250);
+}

package/dist/styles/themes/presets/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Theme Presets
+ *
+ * Pre-configured color schemes for the UIKit
+ * Each preset includes light and dark mode variants
+ *
+ * Usage:
+ * ```tsx
+ * <div data-theme="corporate">
+ *   // Your components will use the corporate color scheme
+ * </div>
+ * ```
+ *
+ * Available presets:
+ * - corporate: Professional blue/gray palette for business applications
+ * - vibrant: Bold, saturated colors with purple/pink/teal
+ * - minimal: Muted, low-contrast palette with subtle accents
+ */
+export declare const themePresets: readonly ["corporate", "vibrant", "minimal"];
+export type ThemePreset = typeof themePresets[number];
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/themes/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/themes/presets/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,YAAY,8CAA+C,CAAA;AAExE,MAAM,MAAM,WAAW,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAA"}

package/dist/styles/themes/presets/minimal.css

@@ -0,0 +1,126 @@
+/**
+ * Minimal Theme Preset
+ * Neutral grayscale with very subtle warm undertones
+ * Clean, content-focused, distraction-free
+ */
+
+html[data-theme="minimal"],
+:root[data-theme="minimal"] {
+  /* === BRAND COLORS (LIGHT) === */
+  --color-primary: oklch(35% 0.02 60);
+  --color-primary-hover: oklch(30% 0.025 60);
+  --color-primary-active: oklch(25% 0.03 60);
+  --color-primary-foreground: oklch(100% 0 0);
+
+  --color-secondary: oklch(50% 0.015 60);
+  --color-secondary-hover: oklch(45% 0.02 60);
+  --color-secondary-active: oklch(40% 0.025 60);
+  --color-secondary-foreground: oklch(100% 0 0);
+
+  --color-accent: oklch(55% 0.08 140);
+  --color-accent-hover: oklch(50% 0.10 140);
+  --color-accent-active: oklch(45% 0.12 140);
+  --color-accent-foreground: oklch(100% 0 0);
+
+  /* === SEMANTIC COLORS (LIGHT) === */
+  --color-success: oklch(50% 0.12 155);
+  --color-success-hover: oklch(45% 0.14 155);
+  --color-success-active: oklch(40% 0.16 155);
+  --color-success-foreground: oklch(100% 0 0);
+
+  --color-error: oklch(55% 0.14 25);
+  --color-error-hover: oklch(50% 0.16 25);
+  --color-error-active: oklch(45% 0.18 25);
+  --color-error-foreground: oklch(100% 0 0);
+
+  --color-warning: oklch(62% 0.12 75);
+  --color-warning-hover: oklch(57% 0.14 75);
+  --color-warning-active: oklch(52% 0.16 75);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  --color-info: oklch(52% 0.10 240);
+  --color-info-hover: oklch(47% 0.12 240);
+  --color-info-active: oklch(42% 0.14 240);
+  --color-info-foreground: oklch(100% 0 0);
+
+  /* === BACKGROUND & SURFACE (LIGHT) === */
+  --color-background: oklch(99% 0.003 60);
+  --color-background-secondary: oklch(97% 0.005 60);
+  --color-surface: oklch(95% 0.006 60);
+  --color-card: oklch(100% 0 0);
+  --color-border: oklch(90% 0.008 60);
+  --color-border-primary: oklch(82% 0.01 60);
+
+  /* === TEXT COLORS (LIGHT) === */
+  --color-text-primary: oklch(22% 0.01 60);
+  --color-text-secondary: oklch(45% 0.008 60);
+  --color-text-muted: oklch(62% 0.006 60);
+
+  /* === INPUT (LIGHT) === */
+  --color-input-border: oklch(87% 0.006 60);
+  --color-input-border-focus: oklch(35% 0.02 60);
+  --color-input-border-error: oklch(55% 0.14 25);
+  --color-input-bg: oklch(100% 0 0);
+}
+
+html[data-theme="minimal"].dark,
+:root[data-theme="minimal"].dark,
+html[data-theme="minimal"] .dark,
+[data-theme="minimal"].dark,
+[data-theme="minimal"] .dark {
+  /* === BRAND COLORS (DARK) === */
+  --color-primary: oklch(75% 0.02 60);
+  --color-primary-hover: oklch(80% 0.025 60);
+  --color-primary-active: oklch(85% 0.03 60);
+  --color-primary-foreground: oklch(12% 0 0);
+
+  --color-secondary: oklch(68% 0.015 60);
+  --color-secondary-hover: oklch(73% 0.02 60);
+  --color-secondary-active: oklch(78% 0.025 60);
+  --color-secondary-foreground: oklch(12% 0 0);
+
+  --color-accent: oklch(70% 0.10 140);
+  --color-accent-hover: oklch(75% 0.12 140);
+  --color-accent-active: oklch(80% 0.14 140);
+  --color-accent-foreground: oklch(12% 0 0);
+
+  /* === SEMANTIC COLORS (DARK) === */
+  --color-success: oklch(68% 0.14 155);
+  --color-success-hover: oklch(73% 0.16 155);
+  --color-success-active: oklch(78% 0.18 155);
+  --color-success-foreground: oklch(12% 0 0);
+
+  --color-error: oklch(70% 0.16 25);
+  --color-error-hover: oklch(75% 0.18 25);
+  --color-error-active: oklch(80% 0.20 25);
+  --color-error-foreground: oklch(12% 0 0);
+
+  --color-warning: oklch(75% 0.14 75);
+  --color-warning-hover: oklch(80% 0.16 75);
+  --color-warning-active: oklch(85% 0.18 75);
+  --color-warning-foreground: oklch(12% 0 0);
+
+  --color-info: oklch(70% 0.12 240);
+  --color-info-hover: oklch(75% 0.14 240);
+  --color-info-active: oklch(80% 0.16 240);
+  --color-info-foreground: oklch(12% 0 0);
+
+  /* === BACKGROUND & SURFACE (DARK) === */
+  --color-background: oklch(12% 0.005 60);
+  --color-background-secondary: oklch(15% 0.006 60);
+  --color-surface: oklch(18% 0.007 60);
+  --color-card: oklch(14% 0.005 60);
+  --color-border: oklch(28% 0.008 60);
+  --color-border-primary: oklch(38% 0.01 60);
+
+  /* === TEXT COLORS (DARK) === */
+  --color-text-primary: oklch(94% 0.006 60);
+  --color-text-secondary: oklch(72% 0.005 60);
+  --color-text-muted: oklch(52% 0.004 60);
+
+  /* === INPUT (DARK) === */
+  --color-input-border: oklch(30% 0.006 60);
+  --color-input-border-focus: oklch(75% 0.02 60);
+  --color-input-border-error: oklch(70% 0.16 25);
+  --color-input-bg: oklch(14% 0.005 60);
+}

package/dist/styles/themes/presets/vibrant.css

@@ -0,0 +1,126 @@
+/**
+ * Vibrant Theme Preset
+ * Bold, saturated colors with purple/magenta/cyan palette
+ * Modern, energetic, creative
+ */
+
+html[data-theme="vibrant"],
+:root[data-theme="vibrant"] {
+  /* === BRAND COLORS (LIGHT) === */
+  --color-primary: oklch(50% 0.30 300);
+  --color-primary-hover: oklch(45% 0.32 300);
+  --color-primary-active: oklch(40% 0.34 300);
+  --color-primary-foreground: oklch(100% 0 0);
+
+  --color-secondary: oklch(60% 0.28 340);
+  --color-secondary-hover: oklch(55% 0.30 340);
+  --color-secondary-active: oklch(50% 0.32 340);
+  --color-secondary-foreground: oklch(100% 0 0);
+
+  --color-accent: oklch(65% 0.22 190);
+  --color-accent-hover: oklch(60% 0.24 190);
+  --color-accent-active: oklch(55% 0.26 190);
+  --color-accent-foreground: oklch(10% 0 0);
+
+  /* === SEMANTIC COLORS (LIGHT) === */
+  --color-success: oklch(58% 0.26 155);
+  --color-success-hover: oklch(53% 0.28 155);
+  --color-success-active: oklch(48% 0.30 155);
+  --color-success-foreground: oklch(100% 0 0);
+
+  --color-error: oklch(60% 0.30 20);
+  --color-error-hover: oklch(55% 0.32 20);
+  --color-error-active: oklch(50% 0.34 20);
+  --color-error-foreground: oklch(100% 0 0);
+
+  --color-warning: oklch(72% 0.22 60);
+  --color-warning-hover: oklch(67% 0.24 60);
+  --color-warning-active: oklch(62% 0.26 60);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  --color-info: oklch(55% 0.26 270);
+  --color-info-hover: oklch(50% 0.28 270);
+  --color-info-active: oklch(45% 0.30 270);
+  --color-info-foreground: oklch(100% 0 0);
+
+  /* === BACKGROUND & SURFACE (LIGHT) === */
+  --color-background: oklch(99% 0.01 300);
+  --color-background-secondary: oklch(97% 0.015 300);
+  --color-surface: oklch(95% 0.02 300);
+  --color-card: oklch(100% 0.005 300);
+  --color-border: oklch(90% 0.025 300);
+  --color-border-primary: oklch(82% 0.035 300);
+
+  /* === TEXT COLORS (LIGHT) === */
+  --color-text-primary: oklch(18% 0.03 300);
+  --color-text-secondary: oklch(38% 0.02 300);
+  --color-text-muted: oklch(55% 0.015 300);
+
+  /* === INPUT (LIGHT) === */
+  --color-input-border: oklch(88% 0.02 300);
+  --color-input-border-focus: oklch(50% 0.30 300);
+  --color-input-border-error: oklch(60% 0.30 20);
+  --color-input-bg: oklch(100% 0 0);
+}
+
+html[data-theme="vibrant"].dark,
+:root[data-theme="vibrant"].dark,
+html[data-theme="vibrant"] .dark,
+[data-theme="vibrant"].dark,
+[data-theme="vibrant"] .dark {
+  /* === BRAND COLORS (DARK) === */
+  --color-primary: oklch(70% 0.28 300);
+  --color-primary-hover: oklch(75% 0.30 300);
+  --color-primary-active: oklch(80% 0.32 300);
+  --color-primary-foreground: oklch(10% 0 0);
+
+  --color-secondary: oklch(72% 0.26 340);
+  --color-secondary-hover: oklch(77% 0.28 340);
+  --color-secondary-active: oklch(82% 0.30 340);
+  --color-secondary-foreground: oklch(10% 0 0);
+
+  --color-accent: oklch(75% 0.22 190);
+  --color-accent-hover: oklch(80% 0.24 190);
+  --color-accent-active: oklch(85% 0.26 190);
+  --color-accent-foreground: oklch(10% 0 0);
+
+  /* === SEMANTIC COLORS (DARK) === */
+  --color-success: oklch(72% 0.24 155);
+  --color-success-hover: oklch(77% 0.26 155);
+  --color-success-active: oklch(82% 0.28 155);
+  --color-success-foreground: oklch(10% 0 0);
+
+  --color-error: oklch(74% 0.28 20);
+  --color-error-hover: oklch(79% 0.30 20);
+  --color-error-active: oklch(84% 0.32 20);
+  --color-error-foreground: oklch(10% 0 0);
+
+  --color-warning: oklch(80% 0.22 60);
+  --color-warning-hover: oklch(85% 0.24 60);
+  --color-warning-active: oklch(90% 0.26 60);
+  --color-warning-foreground: oklch(10% 0 0);
+
+  --color-info: oklch(72% 0.24 270);
+  --color-info-hover: oklch(77% 0.26 270);
+  --color-info-active: oklch(82% 0.28 270);
+  --color-info-foreground: oklch(10% 0 0);
+
+  /* === BACKGROUND & SURFACE (DARK) === */
+  --color-background: oklch(12% 0.04 300);
+  --color-background-secondary: oklch(15% 0.045 300);
+  --color-surface: oklch(18% 0.05 300);
+  --color-card: oklch(16% 0.04 300);
+  --color-border: oklch(26% 0.06 300);
+  --color-border-primary: oklch(36% 0.07 300);
+
+  /* === TEXT COLORS (DARK) === */
+  --color-text-primary: oklch(96% 0.015 300);
+  --color-text-secondary: oklch(78% 0.015 300);
+  --color-text-muted: oklch(58% 0.01 300);
+
+  /* === INPUT (DARK) === */
+  --color-input-border: oklch(28% 0.05 300);
+  --color-input-border-focus: oklch(70% 0.28 300);
+  --color-input-border-error: oklch(74% 0.28 20);
+  --color-input-bg: oklch(14% 0.04 300);
+}