@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/{global.css → globals.css}

@@ -1,575 +1,575 @@
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --font-size: 16px;
-
-  /* Font Family - Iosevka with fallbacks */
-  --font-family-primary:
-    "Iosevka", "SF Mono", "Monaco", "Inconsolata",
-    "Roboto Mono", "Consolas", "Menlo", monospace;
-  --font-family-mono:
-    "IBM Plex Mono", "SF Mono", Monaco, "Cascadia Code",
-    "Roboto Mono", Consolas, "Courier New", monospace;
-
-  /* Typography Scale - Reset to browser defaults */
-  --text-h1: 2rem; /* 32px */
-  --text-h2: 1.5rem; /* 24px */
-  --text-h3: 1.25rem; /* 20px */
-  --text-h4: 1.125rem; /* 18px */
-  --text-h5: 1rem; /* 16px */
-  --text-body-lg: 1.125rem; /* 18px */
-  --text-body: 1rem; /* 16px - Default body text */
-  --text-body-sm: 0.875rem; /* 14px */
-  --text-body-xs: 0.75rem; /* 12px */
-
-  /* Font Weights */
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --radius: 0.5rem;
-
-  /* New Neutral Color Scale - Optimized for #11151E background and #161C27 cards */
-  --neutral-50: #fafbfc;
-  --neutral-100: #f1f3f5;
-  --neutral-200: #e8eaed;
-  --neutral-300: #d1d5db;
-  --neutral-400: #9ca3af;
-  --neutral-500: #6b7280;
-  --neutral-600: #4b5563;
-  --neutral-700: #2d3748;
-  --neutral-800: #161c27;
-  --neutral-900: #11151e;
-
-  /* Primary Color Scale */
-  --primary-100: #e0f7f7;
-  --primary-200: #b3eaea;
-  --primary-300: #80dddd;
-  --primary-400: #4dd0d0;
-  --primary-500: #25a6a6;
-  --primary-600: #1b8d8d;
-  --primary-700: #147676;
-  --primary-800: #0d5c5c;
-  --primary-900: #083f3f;
-
-  /* Semantic Color Scales */
-  --success-100: #dcfce7;
-  --success-200: #bbf7d0;
-  --success-300: #86efac;
-  --success-400: #4ade80;
-  --success-500: #22c55e;
-  --success-600: #16a34a;
-  --success-700: #15803d;
-  --success-800: #166534;
-  --success-900: #14532d;
-
-  --error-100: #fef2f2;
-  --error-200: #fecaca;
-  --error-300: #fca5a5;
-  --error-400: #f87171;
-  --error-500: #ef4444;
-  --error-600: #dc2626;
-  --error-700: #b91c1c;
-  --error-800: #991b1b;
-  --error-900: #7f1d1d;
-
-  --warning-100: #fef3c7;
-  --warning-200: #fde68a;
-  --warning-300: #fcd34d;
-  --warning-400: #fbbf24;
-  --warning-500: #f59e0b;
-  --warning-600: #d97706;
-  --warning-700: #b45309;
-  --warning-800: #92400e;
-  --warning-900: #78350f;
-
-  --info-100: #dbeafe;
-  --info-200: #bfdbfe;
-  --info-300: #93c5fd;
-  --info-400: #60a5fa;
-  --info-500: #3b82f6;
-  --info-600: #2563eb;
-  --info-700: #1d4ed8;
-  --info-800: #1e40af;
-  --info-900: #1e3a8a;
-
-  /* Light Mode Colors */
-  --background: #fafbfc;
-  --foreground: #374151;
-  --card: #ffffff;
-  --card-foreground: #374151;
-  --popover: #ffffff;
-  --popover-foreground: #374151;
-  --primary: #25a6a6;
-  --primary-foreground: #fafbfc;
-  --secondary: #f1f3f5;
-  --secondary-foreground: #374151;
-  --muted: #e8eaed;
-  --muted-foreground: #6b7280;
-  --accent: #f1f3f5;
-  --accent-foreground: #374151;
-  --destructive: #ef4444;
-  --destructive-foreground: #fafbfc;
-  --border: #e8eaed;
-  --input: #ffffff;
-  --input-background: #f1f3f5;
-  --switch-background: #d1d5db;
-  --switch-thumb: #ffffff;
-  --slider-track: #e8eaed;
-  --slider-range: #25a6a6;
-  --slider-thumb: #25a6a6;
-  --ring: #25a6a6;
-
-  /* Chart Colors */
-  --chart-1: #25a6a6;
-  --chart-2: #22c55e;
-  --chart-3: #3b82f6;
-  --chart-4: #f59e0b;
-  --chart-5: #ef4444;
-
-  /* Sidebar Colors */
-  --sidebar: #ffffff;
-  --sidebar-foreground: #374151;
-  --sidebar-primary: #25a6a6;
-  --sidebar-primary-foreground: #fafbfc;
-  --sidebar-accent: #f1f3f5;
-  --sidebar-accent-foreground: #374151;
-  --sidebar-border: #e8eaed;
-  --sidebar-ring: #25a6a6;
-
-  /* Light Mode Elevation Shadows */
-  --elevation-0: none;
-  --elevation-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --elevation-2:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --elevation-3:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --elevation-4:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-
-.dark {
-  /* Dark Mode Colors - Optimized for #11151E background and #161C27 cards */
-  --background: #11151e;
-  --foreground: #f1f3f5;
-  --card: #161c27;
-  --card-foreground: #f1f3f5;
-  --popover: #161c27;
-  --popover-foreground: #f1f3f5;
-  --primary: #4dd0d0;
-  --primary-foreground: #11151e;
-  --secondary: #2d3748;
-  --secondary-foreground: #f1f3f5;
-  --muted: #2d3748;
-  --muted-foreground: #9ca3af;
-  --accent: #2d3748;
-  --accent-foreground: #f1f3f5;
-  --destructive: #f87171;
-  --destructive-foreground: #11151e;
-  --border: #2d3748;
-  --input: #161c27;
-  --input-background: #2d3748;
-  --switch-background: #4b5563;
-  --switch-thumb: #f1f3f5;
-  --slider-track: #4b5563;
-  --slider-range: #4dd0d0;
-  --slider-thumb: #4dd0d0;
-  --ring: #4dd0d0;
-
-  /* Chart Colors - Dark Mode Optimized */
-  --chart-1: #4dd0d0;
-  --chart-2: #4ade80;
-  --chart-3: #60a5fa;
-  --chart-4: #fbbf24;
-  --chart-5: #f87171;
-
-  /* Sidebar Colors - Dark Mode */
-  --sidebar: #161c27;
-  --sidebar-foreground: #f1f3f5;
-  --sidebar-primary: #4dd0d0;
-  --sidebar-primary-foreground: #11151e;
-  --sidebar-accent: #161c27;
-  --sidebar-accent-foreground: #f1f3f5;
-  --sidebar-border: #2d3748;
-  --sidebar-ring: #4dd0d0;
-
-  /* Elevation Shadows for Dark Mode - Enhanced for darker cards */
-  --elevation-0: none;
-  --elevation-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.4),
-    0 1px 2px 0 rgba(255, 255, 255, 0.03);
-  --elevation-2:
-    0 4px 6px -1px rgba(0, 0, 0, 0.5),
-    0 2px 4px -1px rgba(255, 255, 255, 0.05);
-  --elevation-3:
-    0 10px 15px -3px rgba(0, 0, 0, 0.6),
-    0 4px 6px -2px rgba(255, 255, 255, 0.08);
-  --elevation-4:
-    0 20px 25px -5px rgba(0, 0, 0, 0.7),
-    0 10px 10px -5px rgba(255, 255, 255, 0.1);
-  --elevation-5:
-    0 25px 50px -12px rgba(0, 0, 0, 0.8),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-@theme inline {
-  /* Base Theme Colors */
-  --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);
-  --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);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-input-background: var(--input-background);
-  --color-switch-background: var(--switch-background);
-  --color-switch-thumb: var(--switch-thumb);
-  --color-slider-track: var(--slider-track);
-  --color-slider-range: var(--slider-range);
-  --color-slider-thumb: var(--slider-thumb);
-  --color-ring: var(--ring);
-
-  /* Chart Colors */
-  --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);
-
-  /* Sidebar Colors */
-  --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 */
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: calc(var(--radius) - 1px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 2px);
-
-  /* Neutral Scale */
-  --color-neutral-50: var(--neutral-50);
-  --color-neutral-100: var(--neutral-100);
-  --color-neutral-200: var(--neutral-200);
-  --color-neutral-300: var(--neutral-300);
-  --color-neutral-400: var(--neutral-400);
-  --color-neutral-500: var(--neutral-500);
-  --color-neutral-600: var(--neutral-600);
-  --color-neutral-700: var(--neutral-700);
-  --color-neutral-800: var(--neutral-800);
-  --color-neutral-900: var(--neutral-900);
-
-  /* Primary Scale */
-  --color-primary-100: var(--primary-100);
-  --color-primary-200: var(--primary-200);
-  --color-primary-300: var(--primary-300);
-  --color-primary-400: var(--primary-400);
-  --color-primary-500: var(--primary-500);
-  --color-primary-600: var(--primary-600);
-  --color-primary-700: var(--primary-700);
-  --color-primary-800: var(--primary-800);
-  --color-primary-900: var(--primary-900);
-
-  /* Semantic Scales */
-  --color-success-100: var(--success-100);
-  --color-success-200: var(--success-200);
-  --color-success-300: var(--success-300);
-  --color-success-400: var(--success-400);
-  --color-success-500: var(--success-500);
-  --color-success-600: var(--success-600);
-  --color-success-700: var(--success-700);
-  --color-success-800: var(--success-800);
-  --color-success-900: var(--success-900);
-
-  --color-error-100: var(--error-100);
-  --color-error-200: var(--error-200);
-  --color-error-300: var(--error-300);
-  --color-error-400: var(--error-400);
-  --color-error-500: var(--error-500);
-  --color-error-600: var(--error-600);
-  --color-error-700: var(--error-700);
-  --color-error-800: var(--error-800);
-  --color-error-900: var(--error-900);
-
-  --color-warning-100: var(--warning-100);
-  --color-warning-200: var(--warning-200);
-  --color-warning-300: var(--warning-300);
-  --color-warning-400: var(--warning-400);
-  --color-warning-500: var(--warning-500);
-  --color-warning-600: var(--warning-600);
-  --color-warning-700: var(--warning-700);
-  --color-warning-800: var(--warning-800);
-  --color-warning-900: var(--warning-900);
-
-  --color-info-100: var(--info-100);
-  --color-info-200: var(--info-200);
-  --color-info-300: var(--info-300);
-  --color-info-400: var(--info-400);
-  --color-info-500: var(--info-500);
-  --color-info-600: var(--info-600);
-  --color-info-700: var(--info-700);
-  --color-info-800: var(--info-800);
-  --color-info-900: var(--info-900);
-
-  /* Elevation */
-  --shadow-elevation-0: var(--elevation-0);
-  --shadow-elevation-1: var(--elevation-1);
-  --shadow-elevation-2: var(--elevation-2);
-  --shadow-elevation-3: var(--elevation-3);
-  --shadow-elevation-4: var(--elevation-4);
-  --shadow-elevation-5: var(--elevation-5);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-family: var(--font-family-primary);
-  }
-}
-
-@layer base {
-  h1 {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-h1);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.3;
-    color: var(--foreground);
-    letter-spacing: -0.02em;
-  }
-
-  h2 {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-h2);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.3;
-    color: var(--foreground);
-    letter-spacing: -0.015em;
-  }
-
-  h3 {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-h3);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-    color: var(--foreground);
-    letter-spacing: -0.01em;
-  }
-
-  h4 {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-h4);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-    color: var(--foreground);
-    letter-spacing: -0.005em;
-  }
-
-  h5 {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-h5);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-    color: var(--foreground);
-    letter-spacing: 0;
-  }
-
-  p {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-normal);
-    line-height: 1.6;
-    color: var(--foreground);
-    letter-spacing: 0;
-  }
-
-  label {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-    color: var(--foreground);
-    letter-spacing: 0;
-  }
-
-  button {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-    letter-spacing: 0;
-  }
-
-  input,
-  textarea {
-    font-family: var(--font-family-primary);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-normal);
-    line-height: 1.5;
-    color: var(--foreground);
-    background-color: var(--input-background);
-    letter-spacing: 0;
-  }
-}
-
-html {
-  font-size: var(--font-size);
-}
-
-@layer utilities {
-  /* Typography utilities */
-  .text-h1 {
-    font-size: var(--text-h1);
-  }
-  .text-h2 {
-    font-size: var(--text-h2);
-  }
-  .text-h3 {
-    font-size: var(--text-h3);
-  }
-  .text-h4 {
-    font-size: var(--text-h4);
-  }
-  .text-h5 {
-    font-size: var(--text-h5);
-  }
-  .text-body-lg {
-    font-size: var(--text-body-lg);
-  }
-  .text-body {
-    font-size: var(--text-body);
-  }
-  .text-body-sm {
-    font-size: var(--text-body-sm);
-  }
-  .text-body-xs {
-    font-size: var(--text-body-xs);
-  }
-}
-
-@layer utilities {
-  /* Elevation utilities */
-  .elevation-0 {
-    box-shadow: var(--elevation-0);
-  }
-  .elevation-1 {
-    box-shadow: var(--elevation-1);
-  }
-  .elevation-2 {
-    box-shadow: var(--elevation-2);
-  }
-  .elevation-3 {
-    box-shadow: var(--elevation-3);
-  }
-  .elevation-4 {
-    box-shadow: var(--elevation-4);
-  }
-  .elevation-5 {
-    box-shadow: var(--elevation-5);
-  }
-  /* Scrollbar utilities */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox */
-  }
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none; /* Safari and Chrome */
-  }
-}
-
-/* Toast semantic color classes */
-.toast-success {
-  background-color: var(--success-100) !important;
-  color: var(--success-800) !important;
-  border-color: var(--success-200) !important;
-}
-
-.toast-error {
-  background-color: var(--error-100) !important;
-  color: var(--error-800) !important;
-  border-color: var(--error-200) !important;
-}
-
-.toast-warning {
-  background-color: var(--warning-100) !important;
-  color: var(--warning-800) !important;
-  border-color: var(--warning-200) !important;
-}
-
-.toast-info {
-  background-color: var(--info-100) !important;
-  color: var(--info-800) !important;
-  border-color: var(--info-200) !important;
-}
-
-/* Dark mode toast colors */
-.dark .toast-success {
-  background-color: var(--success-900) !important;
-  color: var(--success-300) !important;
-  border-color: var(--success-700) !important;
-}
-
-.dark .toast-error {
-  background-color: var(--error-900) !important;
-  color: var(--error-300) !important;
-  border-color: var(--error-700) !important;
-}
-
-.dark .toast-warning {
-  background-color: var(--warning-900) !important;
-  color: var(--warning-300) !important;
-  border-color: var(--warning-700) !important;
-}
-
-.dark .toast-info {
-  background-color: var(--info-900) !important;
-  color: var(--info-300) !important;
-  border-color: var(--info-700) !important;
-}
-
-/* Slider styling utilities */
-.slider-track {
-  background-color: var(--slider-track) !important;
-}
-
-.slider-range {
-  background-color: var(--slider-range) !important;
-}
-
-.slider-thumb {
-  background-color: var(--slider-thumb) !important;
-  border-color: var(--slider-thumb) !important;
-}
-
-.switch-thumb {
-  background-color: var(--switch-thumb) !important;
-}
-
-
+@source "../src/**/*.{vue,js,ts,jsx,tsx,html}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 16px;
+
+  /* Font Family - Iosevka with fallbacks */
+  --font-family-primary:
+    "Iosevka", "SF Mono", "Monaco", "Inconsolata",
+    "Roboto Mono", "Consolas", "Menlo", monospace;
+  --font-family-mono:
+    "IBM Plex Mono", "SF Mono", Monaco, "Cascadia Code",
+    "Roboto Mono", Consolas, "Courier New", monospace;
+
+  /* Typography Scale - Reset to browser defaults */
+  --text-h1: 2rem; /* 32px */
+  --text-h2: 1.5rem; /* 24px */
+  --text-h3: 1.25rem; /* 20px */
+  --text-h4: 1.125rem; /* 18px */
+  --text-h5: 1rem; /* 16px */
+  --text-body-lg: 1.125rem; /* 18px */
+  --text-body: 1rem; /* 16px - Default body text */
+  --text-body-sm: 0.875rem; /* 14px */
+  --text-body-xs: 0.75rem; /* 12px */
+
+  /* Font Weights */
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --radius: 0.5rem;
+
+  /* New Neutral Color Scale - Optimized for #11151E background and #161C27 cards */
+  --neutral-50: #fafbfc;
+  --neutral-100: #f1f3f5;
+  --neutral-200: #e8eaed;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #2d3748;
+  --neutral-800: #161c27;
+  --neutral-900: #11151e;
+
+  /* Primary Color Scale */
+  --primary-100: #e0f7f7;
+  --primary-200: #b3eaea;
+  --primary-300: #80dddd;
+  --primary-400: #4dd0d0;
+  --primary-500: #25a6a6;
+  --primary-600: #1b8d8d;
+  --primary-700: #147676;
+  --primary-800: #0d5c5c;
+  --primary-900: #083f3f;
+
+  /* Semantic Color Scales */
+  --success-100: #dcfce7;
+  --success-200: #bbf7d0;
+  --success-300: #86efac;
+  --success-400: #4ade80;
+  --success-500: #22c55e;
+  --success-600: #16a34a;
+  --success-700: #15803d;
+  --success-800: #166534;
+  --success-900: #14532d;
+
+  --error-100: #fef2f2;
+  --error-200: #fecaca;
+  --error-300: #fca5a5;
+  --error-400: #f87171;
+  --error-500: #ef4444;
+  --error-600: #dc2626;
+  --error-700: #b91c1c;
+  --error-800: #991b1b;
+  --error-900: #7f1d1d;
+
+  --warning-100: #fef3c7;
+  --warning-200: #fde68a;
+  --warning-300: #fcd34d;
+  --warning-400: #fbbf24;
+  --warning-500: #f59e0b;
+  --warning-600: #d97706;
+  --warning-700: #b45309;
+  --warning-800: #92400e;
+  --warning-900: #78350f;
+
+  --info-100: #dbeafe;
+  --info-200: #bfdbfe;
+  --info-300: #93c5fd;
+  --info-400: #60a5fa;
+  --info-500: #3b82f6;
+  --info-600: #2563eb;
+  --info-700: #1d4ed8;
+  --info-800: #1e40af;
+  --info-900: #1e3a8a;
+
+  /* Light Mode Colors */
+  --background: #fafbfc;
+  --foreground: #374151;
+  --card: #ffffff;
+  --card-foreground: #374151;
+  --popover: #ffffff;
+  --popover-foreground: #374151;
+  --primary: #25a6a6;
+  --primary-foreground: #fafbfc;
+  --secondary: #f1f3f5;
+  --secondary-foreground: #374151;
+  --muted: #e8eaed;
+  --muted-foreground: #6b7280;
+  --accent: #f1f3f5;
+  --accent-foreground: #374151;
+  --destructive: #ef4444;
+  --destructive-foreground: #fafbfc;
+  --border: #e8eaed;
+  --input: #ffffff;
+  --input-background: #f1f3f5;
+  --switch-background: #d1d5db;
+  --switch-thumb: #ffffff;
+  --slider-track: #e8eaed;
+  --slider-range: #25a6a6;
+  --slider-thumb: #25a6a6;
+  --ring: #25a6a6;
+
+  /* Chart Colors */
+  --chart-1: #25a6a6;
+  --chart-2: #22c55e;
+  --chart-3: #3b82f6;
+  --chart-4: #f59e0b;
+  --chart-5: #ef4444;
+
+  /* Sidebar Colors */
+  --sidebar: #ffffff;
+  --sidebar-foreground: #374151;
+  --sidebar-primary: #25a6a6;
+  --sidebar-primary-foreground: #fafbfc;
+  --sidebar-accent: #f1f3f5;
+  --sidebar-accent-foreground: #374151;
+  --sidebar-border: #e8eaed;
+  --sidebar-ring: #25a6a6;
+
+  /* Light Mode Elevation Shadows */
+  --elevation-0: none;
+  --elevation-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --elevation-2:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --elevation-3:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --elevation-4:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.dark {
+  /* Dark Mode Colors - Optimized for #11151E background and #161C27 cards */
+  --background: #11151e;
+  --foreground: #f1f3f5;
+  --card: #161c27;
+  --card-foreground: #f1f3f5;
+  --popover: #161c27;
+  --popover-foreground: #f1f3f5;
+  --primary: #4dd0d0;
+  --primary-foreground: #11151e;
+  --secondary: #2d3748;
+  --secondary-foreground: #f1f3f5;
+  --muted: #2d3748;
+  --muted-foreground: #9ca3af;
+  --accent: #2d3748;
+  --accent-foreground: #f1f3f5;
+  --destructive: #f87171;
+  --destructive-foreground: #11151e;
+  --border: #2d3748;
+  --input: #161c27;
+  --input-background: #2d3748;
+  --switch-background: #4b5563;
+  --switch-thumb: #f1f3f5;
+  --slider-track: #4b5563;
+  --slider-range: #4dd0d0;
+  --slider-thumb: #4dd0d0;
+  --ring: #4dd0d0;
+
+  /* Chart Colors - Dark Mode Optimized */
+  --chart-1: #4dd0d0;
+  --chart-2: #4ade80;
+  --chart-3: #60a5fa;
+  --chart-4: #fbbf24;
+  --chart-5: #f87171;
+
+  /* Sidebar Colors - Dark Mode */
+  --sidebar: #161c27;
+  --sidebar-foreground: #f1f3f5;
+  --sidebar-primary: #4dd0d0;
+  --sidebar-primary-foreground: #11151e;
+  --sidebar-accent: #161c27;
+  --sidebar-accent-foreground: #f1f3f5;
+  --sidebar-border: #2d3748;
+  --sidebar-ring: #4dd0d0;
+
+  /* Elevation Shadows for Dark Mode - Enhanced for darker cards */
+  --elevation-0: none;
+  --elevation-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.4),
+    0 1px 2px 0 rgba(255, 255, 255, 0.03);
+  --elevation-2:
+    0 4px 6px -1px rgba(0, 0, 0, 0.5),
+    0 2px 4px -1px rgba(255, 255, 255, 0.05);
+  --elevation-3:
+    0 10px 15px -3px rgba(0, 0, 0, 0.6),
+    0 4px 6px -2px rgba(255, 255, 255, 0.08);
+  --elevation-4:
+    0 20px 25px -5px rgba(0, 0, 0, 0.7),
+    0 10px 10px -5px rgba(255, 255, 255, 0.1);
+  --elevation-5:
+    0 25px 50px -12px rgba(0, 0, 0, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+@theme {
+  /* Base Theme Colors */
+  --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);
+  --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);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-switch-thumb: var(--switch-thumb);
+  --color-slider-track: var(--slider-track);
+  --color-slider-range: var(--slider-range);
+  --color-slider-thumb: var(--slider-thumb);
+  --color-ring: var(--ring);
+
+  /* Chart Colors */
+  --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);
+
+  /* Sidebar Colors */
+  --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 */
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 2px);
+
+  /* Neutral Scale */
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+
+  /* Primary Scale */
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+
+  /* Semantic Scales */
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-300: var(--success-300);
+  --color-success-400: var(--success-400);
+  --color-success-500: var(--success-500);
+  --color-success-600: var(--success-600);
+  --color-success-700: var(--success-700);
+  --color-success-800: var(--success-800);
+  --color-success-900: var(--success-900);
+
+  --color-error-100: var(--error-100);
+  --color-error-200: var(--error-200);
+  --color-error-300: var(--error-300);
+  --color-error-400: var(--error-400);
+  --color-error-500: var(--error-500);
+  --color-error-600: var(--error-600);
+  --color-error-700: var(--error-700);
+  --color-error-800: var(--error-800);
+  --color-error-900: var(--error-900);
+
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-300: var(--warning-300);
+  --color-warning-400: var(--warning-400);
+  --color-warning-500: var(--warning-500);
+  --color-warning-600: var(--warning-600);
+  --color-warning-700: var(--warning-700);
+  --color-warning-800: var(--warning-800);
+  --color-warning-900: var(--warning-900);
+
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-300: var(--info-300);
+  --color-info-400: var(--info-400);
+  --color-info-500: var(--info-500);
+  --color-info-600: var(--info-600);
+  --color-info-700: var(--info-700);
+  --color-info-800: var(--info-800);
+  --color-info-900: var(--info-900);
+
+  /* Elevation */
+  --shadow-elevation-0: var(--elevation-0);
+  --shadow-elevation-1: var(--elevation-1);
+  --shadow-elevation-2: var(--elevation-2);
+  --shadow-elevation-3: var(--elevation-3);
+  --shadow-elevation-4: var(--elevation-4);
+  --shadow-elevation-5: var(--elevation-5);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-family-primary);
+  }
+}
+
+@layer base {
+  h1 {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-h1);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.3;
+    color: var(--foreground);
+    letter-spacing: -0.02em;
+  }
+
+  h2 {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-h2);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.3;
+    color: var(--foreground);
+    letter-spacing: -0.015em;
+  }
+
+  h3 {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-h3);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+    color: var(--foreground);
+    letter-spacing: -0.01em;
+  }
+
+  h4 {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-h4);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+    color: var(--foreground);
+    letter-spacing: -0.005em;
+  }
+
+  h5 {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-h5);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+    color: var(--foreground);
+    letter-spacing: 0;
+  }
+
+  p {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.6;
+    color: var(--foreground);
+    letter-spacing: 0;
+  }
+
+  label {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+    color: var(--foreground);
+    letter-spacing: 0;
+  }
+
+  button {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+    letter-spacing: 0;
+  }
+
+  input,
+  textarea {
+    font-family: var(--font-family-primary);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+    color: var(--foreground);
+    background-color: var(--input-background);
+    letter-spacing: 0;
+  }
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+@layer utilities {
+  /* Typography utilities */
+  .text-h1 {
+    font-size: var(--text-h1);
+  }
+  .text-h2 {
+    font-size: var(--text-h2);
+  }
+  .text-h3 {
+    font-size: var(--text-h3);
+  }
+  .text-h4 {
+    font-size: var(--text-h4);
+  }
+  .text-h5 {
+    font-size: var(--text-h5);
+  }
+  .text-body-lg {
+    font-size: var(--text-body-lg);
+  }
+  .text-body {
+    font-size: var(--text-body);
+  }
+  .text-body-sm {
+    font-size: var(--text-body-sm);
+  }
+  .text-body-xs {
+    font-size: var(--text-body-xs);
+  }
+}
+
+@layer utilities {
+  /* Elevation utilities */
+  .elevation-0 {
+    box-shadow: var(--elevation-0);
+  }
+  .elevation-1 {
+    box-shadow: var(--elevation-1);
+  }
+  .elevation-2 {
+    box-shadow: var(--elevation-2);
+  }
+  .elevation-3 {
+    box-shadow: var(--elevation-3);
+  }
+  .elevation-4 {
+    box-shadow: var(--elevation-4);
+  }
+  .elevation-5 {
+    box-shadow: var(--elevation-5);
+  }
+  /* Scrollbar utilities */
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+}
+
+/* Toast semantic color classes */
+.toast-success {
+  background-color: var(--success-100) !important;
+  color: var(--success-800) !important;
+  border-color: var(--success-200) !important;
+}
+
+.toast-error {
+  background-color: var(--error-100) !important;
+  color: var(--error-800) !important;
+  border-color: var(--error-200) !important;
+}
+
+.toast-warning {
+  background-color: var(--warning-100) !important;
+  color: var(--warning-800) !important;
+  border-color: var(--warning-200) !important;
+}
+
+.toast-info {
+  background-color: var(--info-100) !important;
+  color: var(--info-800) !important;
+  border-color: var(--info-200) !important;
+}
+
+/* Dark mode toast colors */
+.dark .toast-success {
+  background-color: var(--success-900) !important;
+  color: var(--success-300) !important;
+  border-color: var(--success-700) !important;
+}
+
+.dark .toast-error {
+  background-color: var(--error-900) !important;
+  color: var(--error-300) !important;
+  border-color: var(--error-700) !important;
+}
+
+.dark .toast-warning {
+  background-color: var(--warning-900) !important;
+  color: var(--warning-300) !important;
+  border-color: var(--warning-700) !important;
+}
+
+.dark .toast-info {
+  background-color: var(--info-900) !important;
+  color: var(--info-300) !important;
+  border-color: var(--info-700) !important;
+}
+
+/* Slider styling utilities */
+.slider-track {
+  background-color: var(--slider-track) !important;
+}
+
+.slider-range {
+  background-color: var(--slider-range) !important;
+}
+
+.slider-thumb {
+  background-color: var(--slider-thumb) !important;
+  border-color: var(--slider-thumb) !important;
+}
+
+.switch-thumb {
+  background-color: var(--switch-thumb) !important;
+}