/* ===========================================
   Cleopatra Theme System
   Semantic color variables with OKLCH/HSL support
   =========================================== */

/* Base radius and common values */
:root {
    --radius: 0.65rem;
}

/* ===========================================
   Theme: Neutral (Default) - OKLCH
   Pure grayscale theme
   =========================================== */
:root,
[data-theme="neutral"] {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

[data-theme="neutral"].dark,
.dark[data-theme="neutral"],
:root.dark {
    --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: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
}

/* ===========================================
   Theme: Blue - HSL
   Professional blue theme
   =========================================== */
[data-theme="blue"] {
    --radius: 0.65rem;
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 84% 4.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 84% 4.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(222.2 84% 4.9%);
    --primary: hsl(221.2 83.2% 53.3%);
    --primary-foreground: hsl(210 40% 98%);
    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: hsl(222.2 47.4% 11.2%);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);
    --accent: hsl(210 40% 96.1%);
    --accent-foreground: hsl(222.2 47.4% 11.2%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);
    --ring: hsl(221.2 83.2% 53.3%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: hsl(222.2 84% 4.9%);
    --sidebar-primary: hsl(221.2 83.2% 53.3%);
    --sidebar-primary-foreground: hsl(210 40% 98%);
    --sidebar-accent: hsl(210 40% 96.1%);
    --sidebar-accent-foreground: hsl(222.2 47.4% 11.2%);
    --sidebar-border: hsl(214.3 31.8% 91.4%);
    --sidebar-ring: hsl(221.2 83.2% 53.3%);
}

[data-theme="blue"].dark,
.dark[data-theme="blue"] {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --card: hsl(222.2 84% 4.9%);
    --card-foreground: hsl(210 40% 98%);
    --popover: hsl(222.2 84% 4.9%);
    --popover-foreground: hsl(210 40% 98%);
    --primary: hsl(217.2 91.2% 59.8%);
    --primary-foreground: hsl(222.2 47.4% 11.2%);
    --secondary: hsl(217.2 32.6% 17.5%);
    --secondary-foreground: hsl(210 40% 98%);
    --muted: hsl(217.2 32.6% 17.5%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --accent: hsl(217.2 32.6% 17.5%);
    --accent-foreground: hsl(210 40% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(217.2 32.6% 17.5%);
    --input: hsl(217.2 32.6% 17.5%);
    --ring: hsl(224.3 76.3% 48%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar: hsl(222.2 84% 6%);
    --sidebar-foreground: hsl(210 40% 98%);
    --sidebar-primary: hsl(217.2 91.2% 59.8%);
    --sidebar-primary-foreground: hsl(210 40% 98%);
    --sidebar-accent: hsl(217.2 32.6% 17.5%);
    --sidebar-accent-foreground: hsl(210 40% 98%);
    --sidebar-border: hsl(217.2 32.6% 17.5%);
    --sidebar-ring: hsl(224.3 76.3% 48%);
}

/* ===========================================
   Theme: Green - HSL
   Fresh emerald theme
   =========================================== */
[data-theme="green"] {
    --radius: 0.65rem;
    --background: hsl(0 0% 100%);
    --foreground: hsl(240 10% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(240 10% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(240 10% 3.9%);
    --primary: hsl(142.1 76.2% 36.3%);
    --primary-foreground: hsl(355.7 100% 97.3%);
    --secondary: hsl(240 4.8% 95.9%);
    --secondary-foreground: hsl(240 5.9% 10%);
    --muted: hsl(240 4.8% 95.9%);
    --muted-foreground: hsl(240 3.8% 46.1%);
    --accent: hsl(240 4.8% 95.9%);
    --accent-foreground: hsl(240 5.9% 10%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(240 5.9% 90%);
    --input: hsl(240 5.9% 90%);
    --ring: hsl(142.1 76.2% 36.3%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: hsl(240 10% 3.9%);
    --sidebar-primary: hsl(142.1 76.2% 36.3%);
    --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
    --sidebar-accent: hsl(240 4.8% 95.9%);
    --sidebar-accent-foreground: hsl(240 5.9% 10%);
    --sidebar-border: hsl(240 5.9% 90%);
    --sidebar-ring: hsl(142.1 76.2% 36.3%);
}

[data-theme="green"].dark,
.dark[data-theme="green"] {
    --background: hsl(20 14.3% 4.1%);
    --foreground: hsl(0 0% 95%);
    --popover: hsl(0 0% 9%);
    --popover-foreground: hsl(0 0% 95%);
    --card: hsl(24 9.8% 10%);
    --card-foreground: hsl(0 0% 95%);
    --primary: hsl(142.1 70.6% 45.3%);
    --primary-foreground: hsl(144.9 80.4% 10%);
    --secondary: hsl(240 3.7% 15.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 15%);
    --muted-foreground: hsl(240 5% 64.9%);
    --accent: hsl(12 6.5% 15.1%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(0 85.7% 97.3%);
    --border: hsl(240 3.7% 15.9%);
    --input: hsl(240 3.7% 15.9%);
    --ring: hsl(142.4 71.8% 29.2%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar: hsl(20 14.3% 6%);
    --sidebar-foreground: hsl(0 0% 95%);
    --sidebar-primary: hsl(142.1 70.6% 45.3%);
    --sidebar-primary-foreground: hsl(0 0% 95%);
    --sidebar-accent: hsl(12 6.5% 15.1%);
    --sidebar-accent-foreground: hsl(0 0% 95%);
    --sidebar-border: hsl(240 3.7% 15.9%);
    --sidebar-ring: hsl(142.4 71.8% 29.2%);
}

/* ===========================================
   Theme: Orange - HSL
   Warm energetic theme
   =========================================== */
[data-theme="orange"] {
    --radius: 0.65rem;
    --background: hsl(0 0% 100%);
    --foreground: hsl(20 14.3% 4.1%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(20 14.3% 4.1%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(20 14.3% 4.1%);
    --primary: hsl(24.6 95% 53.1%);
    --primary-foreground: hsl(60 9.1% 97.8%);
    --secondary: hsl(60 4.8% 95.9%);
    --secondary-foreground: hsl(24 9.8% 10%);
    --muted: hsl(60 4.8% 95.9%);
    --muted-foreground: hsl(25 5.3% 44.7%);
    --accent: hsl(60 4.8% 95.9%);
    --accent-foreground: hsl(24 9.8% 10%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(60 9.1% 97.8%);
    --border: hsl(20 5.9% 90%);
    --input: hsl(20 5.9% 90%);
    --ring: hsl(24.6 95% 53.1%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: hsl(20 14.3% 4.1%);
    --sidebar-primary: hsl(24.6 95% 53.1%);
    --sidebar-primary-foreground: hsl(60 9.1% 97.8%);
    --sidebar-accent: hsl(60 4.8% 95.9%);
    --sidebar-accent-foreground: hsl(24 9.8% 10%);
    --sidebar-border: hsl(20 5.9% 90%);
    --sidebar-ring: hsl(24.6 95% 53.1%);
}

[data-theme="orange"].dark,
.dark[data-theme="orange"] {
    --background: hsl(20 14.3% 4.1%);
    --foreground: hsl(60 9.1% 97.8%);
    --card: hsl(20 14.3% 4.1%);
    --card-foreground: hsl(60 9.1% 97.8%);
    --popover: hsl(20 14.3% 4.1%);
    --popover-foreground: hsl(60 9.1% 97.8%);
    --primary: hsl(20.5 90.2% 48.2%);
    --primary-foreground: hsl(60 9.1% 97.8%);
    --secondary: hsl(12 6.5% 15.1%);
    --secondary-foreground: hsl(60 9.1% 97.8%);
    --muted: hsl(12 6.5% 15.1%);
    --muted-foreground: hsl(24 5.4% 63.9%);
    --accent: hsl(12 6.5% 15.1%);
    --accent-foreground: hsl(60 9.1% 97.8%);
    --destructive: hsl(0 72.2% 50.6%);
    --destructive-foreground: hsl(60 9.1% 97.8%);
    --border: hsl(12 6.5% 15.1%);
    --input: hsl(12 6.5% 15.1%);
    --ring: hsl(20.5 90.2% 48.2%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar: hsl(20 14.3% 6%);
    --sidebar-foreground: hsl(60 9.1% 97.8%);
    --sidebar-primary: hsl(20.5 90.2% 48.2%);
    --sidebar-primary-foreground: hsl(60 9.1% 97.8%);
    --sidebar-accent: hsl(12 6.5% 15.1%);
    --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
    --sidebar-border: hsl(12 6.5% 15.1%);
    --sidebar-ring: hsl(20.5 90.2% 48.2%);
}

/* ===========================================
   Theme: Yellow - HSL
   Bright amber theme
   =========================================== */
[data-theme="yellow"] {
    --radius: 0.65rem;
    --background: hsl(0 0% 100%);
    --foreground: hsl(20 14.3% 4.1%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(20 14.3% 4.1%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(20 14.3% 4.1%);
    --primary: hsl(47.9 95.8% 53.1%);
    --primary-foreground: hsl(26 83.3% 14.1%);
    --secondary: hsl(60 4.8% 95.9%);
    --secondary-foreground: hsl(24 9.8% 10%);
    --muted: hsl(60 4.8% 95.9%);
    --muted-foreground: hsl(25 5.3% 44.7%);
    --accent: hsl(60 4.8% 95.9%);
    --accent-foreground: hsl(24 9.8% 10%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(60 9.1% 97.8%);
    --border: hsl(20 5.9% 90%);
    --input: hsl(20 5.9% 90%);
    --ring: hsl(20 14.3% 4.1%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: hsl(20 14.3% 4.1%);
    --sidebar-primary: hsl(47.9 95.8% 53.1%);
    --sidebar-primary-foreground: hsl(26 83.3% 14.1%);
    --sidebar-accent: hsl(60 4.8% 95.9%);
    --sidebar-accent-foreground: hsl(24 9.8% 10%);
    --sidebar-border: hsl(20 5.9% 90%);
    --sidebar-ring: hsl(20 14.3% 4.1%);
}

[data-theme="yellow"].dark,
.dark[data-theme="yellow"] {
    --background: hsl(20 14.3% 4.1%);
    --foreground: hsl(60 9.1% 97.8%);
    --card: hsl(20 14.3% 4.1%);
    --card-foreground: hsl(60 9.1% 97.8%);
    --popover: hsl(20 14.3% 4.1%);
    --popover-foreground: hsl(60 9.1% 97.8%);
    --primary: hsl(47.9 95.8% 53.1%);
    --primary-foreground: hsl(26 83.3% 14.1%);
    --secondary: hsl(12 6.5% 15.1%);
    --secondary-foreground: hsl(60 9.1% 97.8%);
    --muted: hsl(12 6.5% 15.1%);
    --muted-foreground: hsl(24 5.4% 63.9%);
    --accent: hsl(12 6.5% 15.1%);
    --accent-foreground: hsl(60 9.1% 97.8%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(60 9.1% 97.8%);
    --border: hsl(12 6.5% 15.1%);
    --input: hsl(12 6.5% 15.1%);
    --ring: hsl(35.5 91.7% 32.9%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar: hsl(20 14.3% 6%);
    --sidebar-foreground: hsl(60 9.1% 97.8%);
    --sidebar-primary: hsl(47.9 95.8% 53.1%);
    --sidebar-primary-foreground: hsl(26 83.3% 14.1%);
    --sidebar-accent: hsl(12 6.5% 15.1%);
    --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
    --sidebar-border: hsl(12 6.5% 15.1%);
    --sidebar-ring: hsl(35.5 91.7% 32.9%);
}

/* ===========================================
   Theme: Stone - OKLCH
   Warm brown/earthy tones
   =========================================== */
[data-theme="stone"] {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.147 0.004 49.25);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.147 0.004 49.25);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.147 0.004 49.25);
    --primary: oklch(0.45 0.09 56);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.97 0.001 106.424);
    --secondary-foreground: oklch(0.216 0.006 56.043);
    --muted: oklch(0.97 0.001 106.424);
    --muted-foreground: oklch(0.553 0.013 58.071);
    --accent: oklch(0.97 0.001 106.424);
    --accent-foreground: oklch(0.216 0.006 56.043);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.923 0.003 48.717);
    --input: oklch(0.923 0.003 48.717);
    --ring: oklch(0.709 0.01 56.259);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0.001 106.423);
    --sidebar-foreground: oklch(0.147 0.004 49.25);
    --sidebar-primary: oklch(0.216 0.006 56.043);
    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
    --sidebar-accent: oklch(0.97 0.001 106.424);
    --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
    --sidebar-border: oklch(0.923 0.003 48.717);
    --sidebar-ring: oklch(0.709 0.01 56.259);
}

[data-theme="stone"].dark,
.dark[data-theme="stone"] {
    --background: oklch(0.147 0.004 49.25);
    --foreground: oklch(0.985 0.001 106.423);
    --card: oklch(0.216 0.006 56.043);
    --card-foreground: oklch(0.985 0.001 106.423);
    --popover: oklch(0.216 0.006 56.043);
    --popover-foreground: oklch(0.985 0.001 106.423);
    --primary: oklch(0.7 0.09 56);
    --primary-foreground: oklch(0.2 0.04 56);
    --secondary: oklch(0.268 0.007 34.298);
    --secondary-foreground: oklch(0.985 0.001 106.423);
    --muted: oklch(0.268 0.007 34.298);
    --muted-foreground: oklch(0.709 0.01 56.259);
    --accent: oklch(0.268 0.007 34.298);
    --accent-foreground: oklch(0.985 0.001 106.423);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.553 0.013 58.071);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.216 0.006 56.043);
    --sidebar-foreground: oklch(0.985 0.001 106.423);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.553 0.013 58.071);
}

/* ===========================================
   Theme: Slate - OKLCH
   Cool purple/slate tones
   =========================================== */
[data-theme="slate"] {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.141 0.005 285.823);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.005 285.823);
    --primary: oklch(0.45 0.12 260);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.705 0.015 286.067);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.141 0.005 285.823);
    --sidebar-primary: oklch(0.21 0.006 285.885);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.967 0.001 286.375);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.705 0.015 286.067);
}

[data-theme="slate"].dark,
.dark[data-theme="slate"] {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.7 0.12 260);
    --primary-foreground: oklch(0.2 0.05 260);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: oklch(0.274 0.006 286.033);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.552 0.016 285.938);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.006 285.885);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.274 0.006 286.033);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.552 0.016 285.938);
}

/* ===========================================
   Theme: Sky - OKLCH
   Light blue accent
   =========================================== */
[data-theme="sky"] {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.13 0.028 261.692);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.13 0.028 261.692);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.13 0.028 261.692);
    --primary: oklch(0.55 0.15 220);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.967 0.003 264.542);
    --secondary-foreground: oklch(0.21 0.034 264.665);
    --muted: oklch(0.967 0.003 264.542);
    --muted-foreground: oklch(0.551 0.027 264.364);
    --accent: oklch(0.967 0.003 264.542);
    --accent-foreground: oklch(0.21 0.034 264.665);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.928 0.006 264.531);
    --input: oklch(0.928 0.006 264.531);
    --ring: oklch(0.707 0.022 261.325);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0.002 247.839);
    --sidebar-foreground: oklch(0.13 0.028 261.692);
    --sidebar-primary: oklch(0.21 0.034 264.665);
    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
    --sidebar-accent: oklch(0.967 0.003 264.542);
    --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
    --sidebar-border: oklch(0.928 0.006 264.531);
    --sidebar-ring: oklch(0.707 0.022 261.325);
}

[data-theme="sky"].dark,
.dark[data-theme="sky"] {
    --background: oklch(0.13 0.028 261.692);
    --foreground: oklch(0.985 0.002 247.839);
    --card: oklch(0.21 0.034 264.665);
    --card-foreground: oklch(0.985 0.002 247.839);
    --popover: oklch(0.21 0.034 264.665);
    --popover-foreground: oklch(0.985 0.002 247.839);
    --primary: oklch(0.75 0.15 220);
    --primary-foreground: oklch(0.2 0.1 220);
    --secondary: oklch(0.278 0.033 256.848);
    --secondary-foreground: oklch(0.985 0.002 247.839);
    --muted: oklch(0.278 0.033 256.848);
    --muted-foreground: oklch(0.707 0.022 261.325);
    --accent: oklch(0.278 0.033 256.848);
    --accent-foreground: oklch(0.985 0.002 247.839);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.551 0.027 264.364);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.034 264.665);
    --sidebar-foreground: oklch(0.985 0.002 247.839);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
    --sidebar-accent: oklch(0.278 0.033 256.848);
    --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.551 0.027 264.364);
}

/* ===========================================
   Theme: Azure - OKLCH
   Deep indigo/blue accent
   =========================================== */
[data-theme="azure"] {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.129 0.042 264.695);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.129 0.042 264.695);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.129 0.042 264.695);
    --primary: oklch(0.5 0.18 255);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.968 0.007 247.896);
    --secondary-foreground: oklch(0.208 0.042 265.755);
    --muted: oklch(0.968 0.007 247.896);
    --muted-foreground: oklch(0.554 0.046 257.417);
    --accent: oklch(0.968 0.007 247.896);
    --accent-foreground: oklch(0.208 0.042 265.755);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.929 0.013 255.508);
    --input: oklch(0.929 0.013 255.508);
    --ring: oklch(0.704 0.04 256.788);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.984 0.003 247.858);
    --sidebar-foreground: oklch(0.129 0.042 264.695);
    --sidebar-primary: oklch(0.208 0.042 265.755);
    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
    --sidebar-accent: oklch(0.968 0.007 247.896);
    --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
    --sidebar-border: oklch(0.929 0.013 255.508);
    --sidebar-ring: oklch(0.704 0.04 256.788);
}

[data-theme="azure"].dark,
.dark[data-theme="azure"] {
    --background: oklch(0.129 0.042 264.695);
    --foreground: oklch(0.984 0.003 247.858);
    --card: oklch(0.208 0.042 265.755);
    --card-foreground: oklch(0.984 0.003 247.858);
    --popover: oklch(0.208 0.042 265.755);
    --popover-foreground: oklch(0.984 0.003 247.858);
    --primary: oklch(0.7 0.18 255);
    --primary-foreground: oklch(0.2 0.1 255);
    --secondary: oklch(0.279 0.041 260.031);
    --secondary-foreground: oklch(0.984 0.003 247.858);
    --muted: oklch(0.279 0.041 260.031);
    --muted-foreground: oklch(0.704 0.04 256.788);
    --accent: oklch(0.279 0.041 260.031);
    --accent-foreground: oklch(0.984 0.003 247.858);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.551 0.027 264.364);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.208 0.042 265.755);
    --sidebar-foreground: oklch(0.984 0.003 247.858);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
    --sidebar-accent: oklch(0.279 0.041 260.031);
    --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.551 0.027 264.364);
}

/* ===========================================
   Theme: Rose - HSL
   Bold rose/pink accent
   =========================================== */
[data-theme="rose"] {
    --radius: 0.625rem;
    --background: hsl(0 0% 100%);
    --foreground: hsl(346.8 5% 4%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(346.8 5% 4%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(346.8 5% 4%);
    --primary: hsl(346.8 77.2% 49.8%);
    --primary-foreground: hsl(355.7 100% 97.3%);
    --secondary: hsl(350 40% 96%);
    --secondary-foreground: hsl(346.8 77.2% 30%);
    --muted: hsl(350 40% 96%);
    --muted-foreground: hsl(346.8 5% 45%);
    --accent: hsl(350 40% 96%);
    --accent-foreground: hsl(346.8 77.2% 30%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(350 20% 90%);
    --input: hsl(350 20% 90%);
    --ring: hsl(346.8 77.2% 49.8%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: hsl(346.8 5% 4%);
    --sidebar-primary: hsl(346.8 77.2% 49.8%);
    --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
    --sidebar-accent: hsl(350 40% 96%);
    --sidebar-accent-foreground: hsl(346.8 77.2% 30%);
    --sidebar-border: hsl(350 20% 90%);
    --sidebar-ring: hsl(346.8 77.2% 49.8%);
}

[data-theme="rose"].dark,
.dark[data-theme="rose"] {
    --background: hsl(346.8 5% 6%);
    --foreground: hsl(0 0% 95%);
    --card: hsl(346.8 5% 10%);
    --card-foreground: hsl(0 0% 95%);
    --popover: hsl(346.8 5% 10%);
    --popover-foreground: hsl(0 0% 95%);
    --primary: hsl(346.8 77.2% 55%);
    --primary-foreground: hsl(346.8 5% 6%);
    --secondary: hsl(346.8 10% 15%);
    --secondary-foreground: hsl(0 0% 95%);
    --muted: hsl(346.8 10% 15%);
    --muted-foreground: hsl(346.8 5% 60%);
    --accent: hsl(346.8 10% 15%);
    --accent-foreground: hsl(0 0% 95%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(0 0% 95%);
    --border: hsl(346.8 10% 17%);
    --input: hsl(346.8 10% 17%);
    --ring: hsl(346.8 77.2% 55%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar: hsl(346.8 5% 8%);
    --sidebar-foreground: hsl(0 0% 95%);
    --sidebar-primary: hsl(346.8 77.2% 55%);
    --sidebar-primary-foreground: hsl(0 0% 95%);
    --sidebar-accent: hsl(346.8 10% 15%);
    --sidebar-accent-foreground: hsl(0 0% 95%);
    --sidebar-border: hsl(346.8 10% 17%);
    --sidebar-ring: hsl(346.8 77.2% 55%);
}

/* ===========================================
   Additional Semantic Colors
   =========================================== */
:root {
    --success: hsl(142.1 76.2% 36.3%);
    --success-foreground: hsl(355.7 100% 97.3%);
    --warning: hsl(47.9 95.8% 53.1%);
    --warning-foreground: hsl(26 83.3% 14.1%);
    --info: hsl(221.2 83.2% 53.3%);
    --info-foreground: hsl(210 40% 98%);
}

.dark {
    --success: hsl(142.1 70.6% 45.3%);
    --success-foreground: hsl(144.9 80.4% 10%);
    --warning: hsl(47.9 95.8% 53.1%);
    --warning-foreground: hsl(26 83.3% 14.1%);
    --info: hsl(217.2 91.2% 59.8%);
    --info-foreground: hsl(222.2 47.4% 11.2%);
}

/* ===========================================
   Shadows
   =========================================== */
:root {
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ===========================================
   Global Size System
   Consistent sizing for buttons, inputs, cards
   =========================================== */
:root {
    /* Component Heights */
    --size-xs: 1.5rem;
    /* 24px - small icons, badges */
    --size-sm: 2rem;
    /* 32px - small buttons, inputs */
    --size-md: 2.5rem;
    /* 40px - default buttons, inputs */
    --size-lg: 2.75rem;
    /* 44px - large buttons, inputs */
    --size-xl: 3rem;
    /* 48px - extra large elements */
    --size-2xl: 3.5rem;
    /* 56px - hero elements */

    /* Icon Sizes */
    --icon-xs: 0.75rem;
    /* 12px */
    --icon-sm: 1rem;
    /* 16px */
    --icon-md: 1.25rem;
    /* 20px */
    --icon-lg: 1.5rem;
    /* 24px */
    --icon-xl: 2rem;
    /* 32px */

    /* Spacing Scale */
    --spacing-0: 0;
    --spacing-px: 1px;
    --spacing-0-5: 0.125rem;
    /* 2px */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-1-5: 0.375rem;
    /* 6px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-2-5: 0.625rem;
    /* 10px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-3-5: 0.875rem;
    /* 14px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-7: 1.75rem;
    /* 28px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-9: 2.25rem;
    /* 36px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-11: 2.75rem;
    /* 44px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-14: 3.5rem;
    /* 56px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
    --spacing-24: 6rem;
    /* 96px */

    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    /* 2px */
    --radius-default: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Font Sizes */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Transition Durations */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;

    /* Z-Index Scale */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
}