@nqlib/nqui 0.3.0 → 0.3.2

package/dist/styles.css

@@ -12,11 +12,63 @@
  * - Light and dark mode support
  * - Base layer styles
  * - Utility animations
+ * - @source inline() directives for zero-config Tailwind utility generation
  *
  * Generated by: npm run build:lib
  * Do not edit manually
  */
 
+/* Tailwind utility declarations - zero-config setup
+ * These @source inline() directives ensure all nqui utilities are generated
+ * without requiring consumers to add @source directives in their CSS.
+ */
+
+/* Layout & Flexbox utilities */
+@source inline("inline-flex flex items-center justify-center gap-2 shrink-0 w-fit w-10 h-5 h-9 h-10 h-11");
+
+/* Spacing utilities */
+@source inline("px-2 px-3 px-4 px-8 py-0.5 py-1.5 py-2");
+
+/* Typography utilities */
+@source inline("text-sm text-xs text-[0.625rem] font-medium leading-normal text-center whitespace-nowrap underline-offset-4");
+
+/* Border & Radius utilities */
+@source inline("border border-primary border-secondary border-destructive border-success border-warning border-info border-border border-input border-ring rounded-md rounded-lg rounded-full");
+
+/* Background color utilities */
+@source inline("bg-primary bg-secondary bg-destructive bg-success bg-warning bg-info bg-background bg-accent bg-transparent bg-none bg-muted bg-input bg-input/20 dark:bg-input/30");
+
+/* Text color utilities */
+@source inline("text-primary-foreground text-secondary-foreground text-destructive-foreground text-success-foreground text-warning-foreground text-info-foreground text-accent-foreground text-muted-foreground text-foreground");
+
+/* Hover state utilities */
+@source inline("hover:opacity-100 hover:bg-primary/90 hover:bg-secondary/90 hover:bg-destructive/90 hover:bg-success/90 hover:bg-warning/90 hover:bg-info/90 hover:bg-accent hover:bg-muted hover:border-primary/90 hover:border-secondary/90 hover:border-destructive/90 hover:border-success/90 hover:border-warning/90 hover:border-info/90 hover:border-border hover:text-accent-foreground hover:text-muted-foreground hover:underline dark:hover:bg-muted/50");
+
+/* Focus state utilities */
+@source inline("focus:bg-primary/80 focus:bg-secondary/80 focus:bg-destructive/80 focus:bg-success/80 focus:bg-warning/80 focus:bg-info/80 focus:border-primary/80 focus:border-secondary/80 focus:border-destructive/80 focus:border-success/80 focus:border-warning/80 focus:border-info/80 focus:border-border focus:outline-0 focus-visible:outline-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]");
+
+/* Active state utilities */
+@source inline("active:bg-primary/75 active:bg-secondary/75 active:bg-destructive/75 active:bg-success/75 active:bg-warning/75 active:bg-info/75 active:border-primary/75 active:border-secondary/75 active:border-destructive/75 active:border-success/75 active:border-warning/75 active:border-info/75 active:border-border active:bg-none active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)] active:scale-95");
+
+/* Disabled state utilities */
+@source inline("disabled:bg-transparent disabled:shadow-none disabled:opacity-65 disabled:pointer-events-none");
+
+/* Interaction & Cursor utilities */
+@source inline("cursor-pointer select-none touch-manipulation opacity-90 overflow-hidden");
+
+/* Transition utilities */
+@source inline("transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-in-out");
+
+/* SVG & Icon utilities */
+@source inline("[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&>svg]:size-2.5");
+
+/* Group & State utilities */
+@source inline("group/badge has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
+
+/* Z-index elevation utilities */
+@source inline("z-[var(--z-debug)] z-[var(--z-sticky-page)] z-[var(--z-background)] z-[var(--z-content)] z-[var(--z-popover)] z-[var(--z-modal-backdrop)] z-[var(--z-modal)] z-[var(--z-tooltip)] z-[var(--z-sticky-content)] z-[var(--z-floating)]");
+
+
 
 /* Custom dark mode variant - matches when .dark class is on element or ancestor */
 @theme inline {
@@ -107,12 +159,34 @@
     /* Button enhanced styling */
     --button-gradient: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
     --button-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 1px 1px 0 rgba(0,0,0,0.075);
+
+    /* Z-index elevation scale */
+    --z-base: var(--z-base);
+    --z-background: var(--z-background);
+    --z-content: var(--z-content);
+    --z-sticky-content: var(--z-sticky-content);
+    --z-sticky-page: var(--z-sticky-page);
+    --z-floating: var(--z-floating);
+    --z-modal-backdrop: var(--z-modal-backdrop);
+    --z-modal: var(--z-modal);
+    --z-popover: var(--z-popover);
+    --z-tooltip: var(--z-tooltip);
+    --z-debug: var(--z-debug);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
     }
+
+  /* Viewport lock - all scroll managed by individual containers, not body */
+  html,
+  body,
+  #root {
+    height: 100%;
+    overflow: hidden;
+  }
+
   body {
     @apply font-sans bg-background text-foreground;
     }
@@ -169,7 +243,7 @@
   .separator-arrow-down::after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-content);
     top: -7px;
     left: calc(50% - 7px);
     width: 14px;
@@ -184,7 +258,7 @@
   .separator-tab-down::after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-content);
     top: 0;
     left: calc(50% - 10px);
     width: 20px;
@@ -200,7 +274,7 @@
   .separator-stopper::after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-content);
     top: -6px;
     left: calc(50% - 7px);
     width: 14px;
@@ -214,7 +288,7 @@
   .separator-dot::after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-content);
     top: -9px;
     left: calc(50% - 9px);
     width: 18px;
@@ -234,7 +308,7 @@
   .separator-text-decoration::before {
     content: var(--separator-text-content, "j");
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-content);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -65%);
@@ -274,7 +348,7 @@
     );
     filter: blur(1px);
     opacity: 0.7;
-    z-index: -1;
+    z-index: var(--z-background);
   }
 
   /* Vertical orientation support for shiny corner */
@@ -327,7 +401,7 @@
     );
     filter: blur(0.5px);
     opacity: 0.5;
-    z-index: -1;
+    z-index: var(--z-background);
   }
 
   /* Vertical orientation support for shiny edge */
@@ -426,7 +500,7 @@
 
   .cn-toast > * {
     position: relative;
-    z-index: 1;
+    z-index: var(--z-content);
   }
 
   /* Toast Icon Colors Only - All variants use same base styling */
@@ -449,86 +523,242 @@
   .toast-loading .toast-icon-loading {
     color: var(--primary);
   }
-}
-
-/* ============================================
-   nqui Color System & Design Tokens
-   ============================================ */
 
-:root {
-    /* ============================================
-       Primary Color Scale - Light Mode
-       Blue Theme (Hue 240)
-       ============================================ */
+  /* Button enhanced styling classes - replaces arbitrary property values */
+  .nqui-button-gradient {
+    background-image: var(--button-gradient);
+  }
 
-    /* Primary Color Scale (Light Mode) - Blue Theme (Hue 240) */
-    --primary-100: oklch(0.95 0.08 240);
-    --primary-200: oklch(0.90 0.10 240);
-    --primary-300: oklch(0.85 0.12 240);
-    --primary-400: oklch(0.80 0.14 240);
-    --primary-500: oklch(0.60 0.25 240); /* Main primary - darker for light mode */
-    --primary-600: oklch(0.50 0.28 240);
+  .nqui-button-shadow {
+    box-shadow: var(--button-shadow);
+  }
 
-    /* ============================================
-       Semantic Color Scales - Light Mode
-       ============================================ */
+  /* Sliding indicator styles for enhanced tabs */
+  .sliding-indicator {
+    position: absolute;
+    z-index: 0;
+    pointer-events: none;
+    transition:
+      left 0.3s ease-in-out,
+      top 0.3s ease-in-out,
+      width 0.3s ease-in-out,
+      height 0.3s ease-in-out;
+  }
 
-    /* Success Color Scale (Light Mode) - Green (Hue 142) */
-    --success-100: oklch(0.95 0.08 142);
-    --success-200: oklch(0.90 0.10 142);
-    --success-300: oklch(0.75 0.12 142);
-    --success-400: oklch(0.60 0.14 142);
-    --success-500: oklch(0.50 0.15 142);
-    --success-600: oklch(0.40 0.18 142);
+  .sliding-indicator-container {
+    position: relative;
+  }
 
-    /* Warning Color Scale (Light Mode) - Orange (Hue 65) */
-    --warning-100: oklch(0.95 0.08 65);
-    --warning-200: oklch(0.90 0.10 65);
-    --warning-300: oklch(0.85 0.12 65);
-    --warning-400: oklch(0.75 0.14 65);
-    --warning-500: oklch(0.70 0.15 65);
-    --warning-600: oklch(0.60 0.18 65);
+  .sliding-indicator-target {
+    position: relative;
+    z-index: 1;
+  }
 
-    /* Destructive Color Scale (Light Mode) - Red (Hue 25) */
-    --danger-100: oklch(0.95 0.08 25);
-    --danger-200: oklch(0.90 0.10 25);
-    --danger-300: oklch(0.80 0.12 25);
-    --danger-400: oklch(0.70 0.14 25);
-    --danger-500: oklch(0.60 0.15 25);
-    --danger-600: oklch(0.50 0.18 25);
+  /* Ensure indicator is visible - use Tailwind arbitrary z-index with CSS variable */
+  .sliding-indicator-container .sliding-indicator {
+    z-index: 0;
+  }
 
-    /* Info Color Scale (Light Mode) - Cyan/Teal (Hue 200) */
-    --info-100: oklch(0.95 0.08 200);
-    --info-200: oklch(0.90 0.10 200);
-    --info-300: oklch(0.80 0.12 200);
-    --info-400: oklch(0.70 0.14 200);
-    --info-500: oklch(0.60 0.15 200);
-    --info-600: oklch(0.50 0.18 200);
+  .sliding-indicator-container .sliding-indicator-target {
+    z-index: 1;
+  }
 
-    /* ============================================
-       System Color Mappings - Light Mode
-       ============================================ */
+  /* Debug panel styling classes - replaces arbitrary property values */
+  .nqui-debug-panel {
+    background-color: var(--debug-bg);
+    border: 1px solid var(--debug-border);
+    color: var(--debug-foreground);
+  }
 
-    /* Primary Colors - Mapped to color scales */
-    --primary: var(--primary-500);
-    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
-    --primary-hover: var(--primary-400);
-    --ring: var(--primary-500); /* Focus ring uses primary color */
+  .dark .nqui-debug-panel {
+    background-color: var(--debug-bg-dark);
+    border-color: var(--debug-border-dark);
+    color: var(--debug-foreground-dark);
+  }
 
-    /* Semantic Colors - Mapped to color scales */
-    --success: var(--success-500);
-    --success-foreground: oklch(0.98 0 0);
+  /* Shiki code block styling classes - replaces arbitrary property values */
+  /* These classes should be applied to the container, and will target nested .shiki elements */
+  .dark .nqui-shiki-container .shiki {
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
 
-    --warning: var(--warning-500);
-    --warning-foreground: oklch(0.145 0 0);
+  .dark .nqui-shiki-container .shiki_span {
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
 
-    --destructive: var(--danger-500);
-    --destructive-foreground: oklch(0.98 0 0);
+/* ============================================
+   nqui Additional System Variables
+   ============================================ */
 
-    --info: var(--info-500);
-    --info-foreground: oklch(0.98 0 0);
+/* ============================================
+   nqui Color System & Design Tokens
+   ============================================ */
 
-    /* Additional variables from index.css */
+:root {
+    /* ============================================
+       Z-Index Elevation Scale
+       ============================================
+
+       Z-Index Scale Reference Table:
+       ┌─────────────────────┬──────┬─────────────────────────────────────────────┐
+       │ Variable            │ Value│ Use Case                                    │
+       ├─────────────────────┼──────┼─────────────────────────────────────────────┤
+       │ --z-base            │  0   │ Base layer, default stacking                │
+       │ --z-background      │  0   │ Background decorative elements             │
+       │ --z-content         │ 10   │ Standard content layer                     │
+       │ --z-sticky-content  │ 15   │ Sticky content within containers            │
+       │                     │      │ (card headers, table headers)               │
+       │ --z-sticky-page     │ 20   │ Page-level sticky elements                  │
+       │                     │      │ (page headers, navigation bars)             │
+       │ --z-floating        │ 30   │ Floating panels, sidebars                   │
+       │ --z-modal-backdrop  │ 40   │ Modal backdrops/overlays                    │
+       │ --z-modal           │ 50   │ Modal content (dialogs, sheets)            │
+       │ --z-popover         │ 60   │ Dropdowns, select menus, popovers          │
+       │ --z-tooltip         │ 70   │ Tooltips (highest interactive layer)        │
+       │ --z-debug           │ 9999 │ Debug tools (development only)              │
+       └─────────────────────┴──────┴─────────────────────────────────────────────┘
+
+       Stacking Context Hierarchy (bottom to top):
+       ┌─────────────────────────────────────────────────────────────────────────┐
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-debug (9999) - Debug tools                                   │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-tooltip (70) - Tooltips                                      │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-popover (60) - Dropdowns, selects, popovers                │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-modal (50) - Modal content                                  │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-modal-backdrop (40) - Modal backdrops                       │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-floating (30) - Sidebars, floating panels                   │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-sticky-page (20) - Page headers, navigation                 │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-sticky-content (15) - Card headers, table headers            │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-content (10) - Standard content                             │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       │  ┌───────────────────────────────────────────────────────────────┐    │
+       │  │ z-base / z-background (0) - Base layer, backgrounds          │    │
+       │  └───────────────────────────────────────────────────────────────┘    │
+       │                                                                         │
+       └─────────────────────────────────────────────────────────────────────────┘
+
+       Component Mapping Table (Before Refactoring):
+       ┌─────────────────────────────────────┬──────────┬──────────────────────────┐
+       │ Component                           │ Old Value│ New Variable             │
+       ├─────────────────────────────────────┼──────────┼──────────────────────────┤
+       │ Card sticky header                  │ z-20     │ --z-sticky-content (15)  │
+       │ Page header (AppLayout)             │ z-10     │ --z-sticky-page (20)     │
+       │ Sidebar                             │ z-10     │ --z-floating (30)        │
+       │ Sidebar handle                      │ z-20     │ --z-sticky-page (20)     │
+       │ Dialog overlay                      │ z-50     │ --z-modal-backdrop (40)  │
+       │ Dialog content                      │ z-50     │ --z-modal (50)            │
+       │ Sheet content                       │ z-50     │ --z-modal (50)            │
+       │ Dropdown menu                       │ z-50     │ --z-popover (60)          │
+       │ Select dropdown                     │ z-50     │ --z-popover (60)          │
+       │ Popover                             │ z-50     │ --z-popover (60)          │
+       │ Tooltip                             │ z-50     │ --z-tooltip (70)          │
+       │ Combobox                            │ z-50     │ --z-popover (60)          │
+       │ Enhanced select                     │ z-50     │ --z-popover (60)          │
+       │ Separator decorations               │ z-index:1│ --z-content (10)         │
+       │ Frosted glass backgrounds           │ z-0      │ --z-background (0)        │
+       │ Card content layer                  │ z-10     │ --z-content (10)         │
+       │ Debug panel                         │ z-[9997] │ --z-debug (9999)          │
+       │ Color picker                        │ z-[9999] │ --z-popover (60)         │
+       └─────────────────────────────────────┴──────────┴──────────────────────────┘
+
+       Key Relationships:
+       - Card sticky headers (15) < Page headers (20) - Prevents scroll conflicts
+       - Sticky content (15) < Sticky page (20) - Ensures page nav stays on top
+       - Floating panels (30) > Page headers (20) - Sidebars overlay content
+       - Modals (50) > Floating (30) - Modals overlay everything
+       - Popovers (60) > Modals (50) - Dropdowns can appear in modals
+       - Tooltips (70) > Popovers (60) - Tooltips are highest interactive layer
+    */
+
+    /* Base layer - default stacking context */
+    --z-base: 0;
+
+    /* Background layer - decorative elements behind content */
+    --z-background: 0;
+
+    /* Content layer - standard content elements */
+    --z-content: 10;
+
+    /* Sticky content layer - sticky elements within containers
+     * Used for: card headers, table headers, section headers
+     * Must be below page-level sticky elements to prevent conflicts
+     */
+    --z-sticky-content: 15;
+
+    /* Sticky page layer - page-level sticky elements
+     * Used for: page headers, navigation bars, top bars
+     * Must be above sticky-content to ensure page navigation works
+     */
+    --z-sticky-page: 20;
+
+    /* Floating layer - floating panels and sidebars
+     * Used for: sidebars, floating panels, slide-out menus
+     * Positioned above page content but below modals
+     */
+    --z-floating: 30;
+
+    /* Modal backdrop layer - modal overlays and backdrops
+     * Used for: dialog overlays, sheet backdrops
+     * Positioned below modal content but above floating panels
+     */
+    --z-modal-backdrop: 40;
+
+    /* Modal layer - modal content
+     * Used for: dialog content, sheet content, alert dialogs
+     * Positioned above backdrops but below popovers
+     */
+    --z-modal: 50;
+
+    /* Popover layer - dropdowns and popovers
+     * Used for: dropdown menus, select dropdowns, popovers, comboboxes
+     * Positioned above modals to allow dropdowns in modal contexts
+     */
+    --z-popover: 60;
+
+    /* Tooltip layer - tooltips (highest interactive layer)
+     * Used for: tooltips, hover cards
+     * Highest interactive layer to ensure tooltips appear above all UI
+     */
+    --z-tooltip: 9998;
+
+    /* Debug layer - debug tools (development only)
+     * Used for: debug panels, debug overlays, development tools
+     * Extremely high value to ensure debug tools are always visible
+     */
+    --z-debug: 9999;
+
+    /* Color system variables from colors.css */
     /* ============================================
        Primary Color Scale - Light Mode
        Blue Theme (Hue 240)
@@ -602,34 +832,38 @@
     --info-foreground: oklch(0.98 0 0);
 
     /* Additional variables from index.css */
+    /* System UI colors (unique to index.css) */
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
+    --card: oklch(0.99 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    /* --primary and --primary-foreground are now defined in colors.css */
     --secondary: oklch(0.967 0.001 286.375);
     --secondary-foreground: oklch(0.21 0.006 285.885);
     --muted: oklch(0.97 0 0);
     --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
+    --accent: oklch(0.96 0 0);
     --accent-foreground: oklch(0.205 0 0);
-    /* --destructive, --success, --warning, --info and their foregrounds are now defined in colors.css */
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    /* --ring is now defined in colors.css to use primary color */
+
+    /* Chart colors */
     --chart-1: oklch(0.809 0.105 251.813);
     --chart-2: oklch(0.623 0.214 259.815);
     --chart-3: oklch(0.546 0.245 262.881);
     --chart-4: oklch(0.488 0.243 264.376);
     --chart-5: oklch(0.424 0.199 265.638);
+
+    /* Layout */
     --radius: 0.45rem;
+
+    /* Sidebar */
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.546 0.245 262.881);
-    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: oklch(0.96 0 0);
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
@@ -709,105 +943,34 @@
     --info-foreground: oklch(0.98 0 0);
 
     /* Additional variables from index.css */
-    /* ============================================
-       Primary Color Scale - Dark Mode
-       Blue Theme (Hue 240)
-       ============================================ */
-
-    /* Primary Color Scale (Dark Mode) - Blue Theme (Hue 240) */
-    --primary-100: oklch(0.40 0.15 240);
-    --primary-200: oklch(0.45 0.18 240);
-    --primary-300: oklch(0.50 0.20 240);
-    --primary-400: oklch(0.55 0.22 240);
-    --primary-500: oklch(0.65 0.20 240); /* Main primary - lighter for dark mode */
-    --primary-600: oklch(0.70 0.22 240);
-
-    /* ============================================
-       Semantic Color Scales - Dark Mode
-       ============================================ */
-
-    /* Success Color Scale (Dark Mode) - Green (Hue 142) */
-    --success-100: oklch(0.40 0.15 142);
-    --success-200: oklch(0.45 0.18 142);
-    --success-300: oklch(0.50 0.20 142);
-    --success-400: oklch(0.55 0.22 142);
-    --success-500: oklch(0.65 0.20 142);
-    --success-600: oklch(0.70 0.22 142);
-
-    /* Warning Color Scale (Dark Mode) - Orange (Hue 65) */
-    --warning-100: oklch(0.50 0.15 65);
-    --warning-200: oklch(0.55 0.18 65);
-    --warning-300: oklch(0.60 0.20 65);
-    --warning-400: oklch(0.65 0.22 65);
-    --warning-500: oklch(0.75 0.15 65);
-    --warning-600: oklch(0.80 0.18 65);
-
-    /* Destructive Color Scale (Dark Mode) - Red (Hue 25) */
-    --danger-100: oklch(0.40 0.15 25);
-    --danger-200: oklch(0.45 0.18 25);
-    --danger-300: oklch(0.50 0.20 25);
-    --danger-400: oklch(0.55 0.22 25);
-    --danger-500: oklch(0.65 0.15 25);
-    --danger-600: oklch(0.70 0.18 25);
-
-    /* Info Color Scale (Dark Mode) - Cyan/Teal (Hue 200) */
-    --info-100: oklch(0.40 0.15 200);
-    --info-200: oklch(0.45 0.18 200);
-    --info-300: oklch(0.50 0.20 200);
-    --info-400: oklch(0.55 0.22 200);
-    --info-500: oklch(0.65 0.15 200);
-    --info-600: oklch(0.70 0.18 200);
-
-    /* ============================================
-       System Color Mappings - Dark Mode
-       ============================================ */
-
-    /* Primary Colors - Mapped to color scales */
-    --primary: var(--primary-500);
-    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
-    --primary-hover: var(--primary-400);
-    --ring: var(--primary-500); /* Focus ring uses primary color */
-
-    /* Semantic Colors - Mapped to color scales */
-    --success: var(--success-500);
-    --success-foreground: oklch(0.98 0 0);
-
-    --warning: var(--warning-500);
-    --warning-foreground: oklch(0.985 0 0);
-
-    --destructive: var(--danger-500);
-    --destructive-foreground: oklch(0.98 0 0);
-
-    --info: var(--info-500);
-    --info-foreground: oklch(0.98 0 0);
-
-    /* Additional variables from index.css */
+    /* System UI colors for dark mode (unique to index.css) */
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.205 0 0);
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    /* --primary and --primary-foreground are now defined in colors.css */
     --secondary: oklch(0.274 0.006 286.033);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.371 0 0);
     --accent-foreground: oklch(0.985 0 0);
-    /* --destructive, --success, --warning, --info and their foregrounds are now defined in colors.css */
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
-    /* --ring is now defined in colors.css to use primary color */
+
+    /* Chart colors (same for both modes) */
     --chart-1: oklch(0.809 0.105 251.813);
     --chart-2: oklch(0.623 0.214 259.815);
     --chart-3: oklch(0.546 0.245 262.881);
     --chart-4: oklch(0.488 0.243 264.376);
     --chart-5: oklch(0.424 0.199 265.638);
+
+    /* Sidebar for dark mode */
     --sidebar: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.623 0.214 259.815);
-    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);