/**
 * QuestGate Color Schemes v2.0.0
 * Complete CSS color scheme definitions for external use
 * 
 * Source of Truth: src/index.css
 * Last updated: 2025-12-28
 * 
 * Available schemes: color-default, color-mystic, color-forest, 
 * color-fantasy, color-scifi, color-dnd, color-steampunk, color-cyberpunk,
 * color-volcanic, color-arctic
 * 
 * Usage: Add class "color-{scheme}" to root element (e.g., "color-default")
 * For light mode: Add "light" class alongside the color scheme class
 * 
 * Font System:
 * - Headings: Cinzel (fantasy/medieval decorative serif)
 * - Body: EB Garamond (elegant serif for readability)
 * - UI: Inter (clean sans-serif for interface elements)
 * - Russian fallback: Play font for Cyrillic headings
 */

/* ============================================
   FONT IMPORTS
   ============================================ */
/* Fonts loaded via index.html — no @import needed here */

/* ============================================
   BASE DARK THEME (Default Dark Slate / Artifact Gold)
   ============================================ */
:root {
  /* Dark Slate Backgrounds */
  --background: 222 47% 11%;
  --foreground: 36 45% 88%;

  /* Card & Surface Colors */
  --card: 222 47% 14%;
  --card-foreground: 36 45% 88%;

  --popover: 222 47% 14%;
  --popover-foreground: 36 45% 88%;

  /* Artifact Gold - Primary Brand Color */
  --primary: 36 84% 55%;
  --primary-foreground: 222 47% 11%;
  --primary-glow: 36 95% 65%;

  /* Secondary - Lighter Slate */
  --secondary: 222 32% 20%;
  --secondary-foreground: 36 45% 88%;

  /* Muted Surfaces */
  --muted: 222 32% 17%;
  --muted-foreground: 220 20% 60%;

  /* Rune Emerald - Accent Color */
  --accent: 158 64% 52%;
  --accent-foreground: 222 47% 11%;
  --accent-glow: 158 75% 62%;

  /* Accent Ruby - Destructive/Important Actions */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Borders & Inputs */
  --border: 222 32% 25%;
  --input: 222 32% 20%;
  --ring: 36 84% 55%;

  --radius: 0.5rem;

  /* Sidebar Colors */
  --sidebar-background: 222 47% 11%;
  --sidebar-foreground: 36 45% 88%;
  --sidebar-primary: 36 84% 55%;
  --sidebar-primary-foreground: 222 47% 11%;
  --sidebar-accent: 222 32% 20%;
  --sidebar-accent-foreground: 36 45% 88%;
  --sidebar-border: 222 32% 25%;
  --sidebar-ring: 36 84% 55%;

  /* Fantasy Theme Specific */
  --gold-shimmer: 36 100% 70%;
  --emerald-glow: 158 75% 62%;
  --ruby-glow: 0 84% 61%;
  --slate-deep: 222 47% 8%;
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, hsl(36 84% 55%), hsl(45 100% 70%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(36 84% 50%), hsl(50 100% 65%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  
  /* Shadows with color */
  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.3);
  --shadow-slate: 0 4px 20px -4px hsl(222 47% 8% / 0.5);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(222 47% 8% / 0.5);
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   BASE LIGHT THEME
   ============================================ */
.light {
  /* Light Fantasy Theme */
  --background: 36 55% 96%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 36 84% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 36 30% 92%;
  --secondary-foreground: 222 47% 11%;

  --muted: 36 30% 94%;
  --muted-foreground: 222 20% 40%;

  --accent: 158 54% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 36 20% 85%;
  --input: 36 20% 90%;
  --ring: 36 84% 45%;
}

/* ============================================
   DEFAULT SCHEME - Gold & Emerald
   Dark slate background with artifact gold primary
   and rune emerald accent
   ============================================ */
.color-default {
  --background: 222 47% 11%;
  --foreground: 36 45% 88%;
  --card: 222 47% 14%;
  --card-foreground: 36 45% 88%;
  --popover: 222 47% 14%;
  --popover-foreground: 36 45% 88%;
  --primary: 36 84% 55%;
  --primary-foreground: 222 47% 11%;
  --primary-glow: 36 95% 65%;
  --secondary: 222 32% 20%;
  --secondary-foreground: 36 45% 88%;
  --muted: 222 32% 17%;
  --muted-foreground: 220 20% 60%;
  --accent: 158 64% 52%;
  --accent-foreground: 222 47% 11%;
  --accent-glow: 158 75% 62%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 32% 25%;
  --input: 222 32% 20%;
  --ring: 36 84% 55%;
  --radius: 0.5rem;
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, hsl(36 84% 55%), hsl(45 100% 70%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(36 84% 50%), hsl(50 100% 65%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(222 47% 8%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(222 47% 8%));
  
  /* Shadows */
  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.3);
  --shadow-slate: 0 4px 20px -4px hsl(222 47% 8% / 0.5);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(222 47% 8% / 0.5);
  
  /* Sidebar */
  --sidebar-background: 222 47% 11%;
  --sidebar-foreground: 36 45% 88%;
  --sidebar-primary: 36 84% 55%;
  --sidebar-primary-foreground: 222 47% 11%;
  --sidebar-accent: 222 32% 20%;
  --sidebar-accent-foreground: 36 45% 88%;
  --sidebar-border: 222 32% 25%;
  --sidebar-ring: 36 84% 55%;
}

.color-default.light {
  --background: 36 55% 96%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 36 84% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 36 30% 92%;
  --secondary-foreground: 222 47% 11%;
  --muted: 36 25% 94%;
  --muted-foreground: 220 15% 40%;
  --accent: 158 55% 40%;
  --accent-foreground: 0 0% 100%;
  --border: 36 25% 85%;
  --input: 36 30% 90%;
  --ring: 36 84% 45%;
  
  --gradient-primary: linear-gradient(135deg, hsl(36 84% 45%), hsl(36 90% 55%));
  --gradient-secondary: linear-gradient(135deg, hsl(36 30% 92%), hsl(36 55% 96%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(36 55% 96%));
  --shadow-glow: 0 10px 40px -10px hsl(36 84% 45% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(222 47% 11% / 0.1);
  
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 222 30% 26%;
  --sidebar-primary: 36 84% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 36 20% 96%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-border: 36 25% 91%;
  --sidebar-ring: 36 84% 45%;
}

/* ============================================
   MYSTIC SCHEME - Purple & Cyan
   Deep blue/purple with mystic purple primary
   and cyan accent
   ============================================ */
.color-mystic {
  /* Deep Blue/Purple Backgrounds */
  --background: 250 60% 12%;
  --foreground: 270 40% 92%;

  --card: 250 55% 15%;
  --card-foreground: 270 40% 92%;

  --popover: 250 55% 15%;
  --popover-foreground: 270 40% 92%;

  /* Mystic Purple - Primary */
  --primary: 270 70% 60%;
  --primary-foreground: 250 60% 12%;
  --primary-glow: 270 80% 70%;

  --secondary: 250 45% 22%;
  --secondary-foreground: 270 40% 92%;

  --muted: 250 40% 18%;
  --muted-foreground: 250 20% 65%;

  /* Cyan Accent */
  --accent: 190 85% 55%;
  --accent-foreground: 250 60% 12%;
  --accent-glow: 190 90% 65%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 250 40% 28%;
  --input: 250 45% 22%;
  --ring: 270 70% 60%;
  --radius: 0.75rem;

  --gold-shimmer: 270 100% 75%;
  --emerald-glow: 190 90% 65%;
  --ruby-glow: 0 84% 61%;
  --slate-deep: 250 60% 8%;

  --gradient-gold: linear-gradient(135deg, hsl(270 70% 55%), hsl(190 90% 60%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(270 70% 50%), hsl(200 95% 55%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(250 60% 8%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(250 60% 10%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.3);
  --shadow-slate: 0 4px 20px -4px hsl(250 60% 8% / 0.5);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(250 60% 6% / 0.5);
  
  --sidebar-background: 250 60% 12%;
  --sidebar-foreground: 270 40% 92%;
  --sidebar-primary: 270 70% 60%;
  --sidebar-primary-foreground: 250 60% 12%;
  --sidebar-accent: 250 45% 22%;
  --sidebar-accent-foreground: 270 40% 92%;
  --sidebar-border: 250 40% 28%;
  --sidebar-ring: 270 70% 60%;
}

.color-mystic.light {
  --background: 270 50% 98%;
  --foreground: 250 60% 12%;

  --card: 270 40% 100%;
  --card-foreground: 250 60% 12%;

  --popover: 270 40% 100%;
  --popover-foreground: 250 60% 12%;

  --primary: 270 70% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 270 35% 95%;
  --secondary-foreground: 250 60% 12%;

  --muted: 270 30% 96%;
  --muted-foreground: 250 30% 35%;

  --accent: 190 75% 45%;
  --accent-foreground: 0 0% 100%;

  --border: 270 25% 88%;
  --input: 270 30% 92%;
  --ring: 270 70% 50%;
  
  --gradient-primary: linear-gradient(135deg, hsl(270 70% 50%), hsl(270 75% 60%));
  --gradient-secondary: linear-gradient(135deg, hsl(270 30% 96%), hsl(270 50% 98%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(270 50% 98%));
  --shadow-glow: 0 10px 40px -10px hsl(270 70% 50% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(250 60% 12% / 0.1);
  
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 250 30% 26%;
  --sidebar-primary: 270 70% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 270 20% 96%;
  --sidebar-accent-foreground: 250 60% 12%;
  --sidebar-border: 250 25% 91%;
  --sidebar-ring: 270 70% 50%;
}

/* ============================================
   FOREST SCHEME - Green & Amber
   Deep forest backgrounds with forest green primary
   and amber accent
   ============================================ */
.color-forest {
  /* Deep Forest Backgrounds */
  --background: 150 50% 5%;
  --foreground: 80 20% 95%;

  --card: 150 40% 9%;
  --card-foreground: 80 20% 95%;

  --popover: 150 40% 9%;
  --popover-foreground: 80 20% 95%;

  /* Forest Green - Primary */
  --primary: 145 75% 55%;
  --primary-foreground: 150 50% 5%;
  --primary-glow: 145 80% 65%;

  --secondary: 150 35% 12%;
  --secondary-foreground: 80 20% 95%;

  --muted: 150 35% 8%;
  --muted-foreground: 140 12% 70%;

  /* Amber Accent */
  --accent: 45 90% 55%;
  --accent-foreground: 150 50% 5%;
  --accent-glow: 45 95% 65%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 150 25% 28%;
  --input: 150 35% 11%;
  --ring: 145 75% 55%;
  --radius: 0.5rem;

  --gold-shimmer: 45 100% 70%;
  --emerald-glow: 145 85% 65%;
  --ruby-glow: 0 84% 61%;
  --slate-deep: 150 50% 3%;

  --gradient-gold: linear-gradient(135deg, hsl(145 75% 50%), hsl(45 95% 60%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(145 75% 45%), hsl(50 90% 55%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(150 50% 4%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(150 50% 4%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.3);
  --shadow-slate: 0 4px 20px -4px hsl(150 50% 3% / 0.5);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(150 50% 2% / 0.5);
  
  --sidebar-background: 150 50% 5%;
  --sidebar-foreground: 80 20% 95%;
  --sidebar-primary: 145 75% 55%;
  --sidebar-primary-foreground: 150 50% 5%;
  --sidebar-accent: 150 35% 11%;
  --sidebar-accent-foreground: 80 20% 95%;
  --sidebar-border: 150 25% 28%;
  --sidebar-ring: 145 75% 55%;
}

.color-forest.light {
  --background: 120 40% 97%;
  --foreground: 150 45% 10%;

  --card: 120 30% 100%;
  --card-foreground: 150 45% 10%;

  --popover: 120 30% 100%;
  --popover-foreground: 150 45% 10%;

  --primary: 145 70% 35%;
  --primary-foreground: 0 0% 100%;

  --secondary: 120 30% 94%;
  --secondary-foreground: 150 45% 10%;

  --muted: 120 25% 96%;
  --muted-foreground: 150 35% 30%;

  --accent: 35 85% 40%;
  --accent-foreground: 0 0% 100%;

  --border: 120 20% 86%;
  --input: 120 25% 90%;
  --ring: 145 70% 35%;
  
  --gradient-primary: linear-gradient(135deg, hsl(145 70% 35%), hsl(145 75% 45%));
  --gradient-secondary: linear-gradient(135deg, hsl(120 30% 94%), hsl(120 40% 97%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(120 40% 97%));
  --shadow-glow: 0 10px 40px -10px hsl(145 70% 35% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(150 45% 10% / 0.1);
  
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 150 30% 26%;
  --sidebar-primary: 145 70% 35%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 120 20% 96%;
  --sidebar-accent-foreground: 150 45% 10%;
  --sidebar-border: 120 25% 91%;
  --sidebar-ring: 145 70% 35%;
}

/* ============================================
   FANTASY SCHEME - Mystic Purple & Arcane Blue
   Dark blue-gray with mystic purple primary,
   arcane blue secondary, and ruby red accent
   ============================================ */
.color-fantasy {
  /* Deep Dark Blue-Gray Backgrounds */
  --background: 220 15% 8%;
  --foreground: 40 60% 90%;

  --card: 220 15% 10%;
  --card-foreground: 40 60% 90%;

  --popover: 220 15% 10%;
  --popover-foreground: 40 60% 90%;

  /* Mystic Purple - Primary */
  --primary: 280 80% 55%;
  --primary-foreground: 220 15% 8%;
  --primary-glow: 280 80% 70%;

  /* Arcane Blue - Secondary */
  --secondary: 210 70% 45%;
  --secondary-foreground: 40 60% 90%;

  --muted: 220 15% 15%;
  --muted-foreground: 220 10% 60%;

  /* Ruby Red - Accent */
  --accent: 340 75% 55%;
  --accent-foreground: 220 15% 8%;
  --accent-glow: 340 80% 65%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 15% 20%;
  --input: 220 15% 20%;
  --ring: 280 80% 55%;
  --radius: 0.5rem;

  /* Additional Fantasy Colors */
  --mystic: 280 80% 55%;
  --mystic-glow: 280 80% 70%;
  --arcane: 210 70% 45%;
  --dragon: 45 90% 55%;
  --forest: 145 60% 45%;
  --ember: 25 90% 55%;

  --gold-shimmer: 45 100% 70%;
  --emerald-glow: 145 70% 60%;
  --ruby-glow: 340 80% 65%;
  --slate-deep: 220 15% 5%;

  /* Fantasy Gradients */
  --gradient-gold: linear-gradient(135deg, hsl(280 85% 55%), hsl(210 75% 50%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--dragon)), hsl(var(--ember)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(280 80% 50%), hsl(200 80% 55%));
  --gradient-secondary: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%));
  --gradient-card: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%));
  --gradient-mystic: linear-gradient(135deg, hsl(280 80% 55%), hsl(210 70% 45%));
  --gradient-arcane: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%));
  --gradient-hero: linear-gradient(135deg, hsl(280 80% 25%), hsl(210 70% 20%));

  /* Fantasy Shadows */
  --shadow-gold: 0 10px 40px -10px hsl(var(--mystic) / 0.5);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--dragon) / 0.4);
  --shadow-slate: 0 4px 20px -4px hsl(220 15% 5% / 0.6);
  --shadow-mystic: 0 10px 40px -10px hsl(280 80% 55% / 0.5);
  --shadow-glow: 0 10px 40px -10px hsl(var(--mystic) / 0.5);
  --shadow-card: 0 4px 20px -4px hsl(220 15% 4% / 0.5);
  --glow-mystic: 0 0 20px hsl(280 80% 70% / 0.6);
  
  --sidebar-background: 220 15% 8%;
  --sidebar-foreground: 40 60% 90%;
  --sidebar-primary: 280 80% 55%;
  --sidebar-primary-foreground: 220 15% 8%;
  --sidebar-accent: 220 15% 15%;
  --sidebar-accent-foreground: 40 60% 90%;
  --sidebar-border: 220 15% 20%;
  --sidebar-ring: 280 80% 55%;
}

.color-fantasy.light {
  --background: 280 30% 97%;
  --foreground: 220 15% 15%;

  --card: 280 20% 100%;
  --card-foreground: 220 15% 15%;

  --popover: 280 20% 100%;
  --popover-foreground: 220 15% 15%;

  --primary: 280 70% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 60% 50%;
  --secondary-foreground: 0 0% 100%;

  --muted: 280 20% 96%;
  --muted-foreground: 220 15% 40%;

  --accent: 340 65% 50%;
  --accent-foreground: 0 0% 100%;

  --border: 280 15% 85%;
  --input: 280 20% 90%;
  --ring: 280 70% 45%;

  /* Light Fantasy Colors */
  --mystic: 280 70% 45%;
  --arcane: 210 60% 50%;
  --dragon: 45 85% 50%;
  --forest: 145 55% 40%;
  --ember: 25 85% 50%;
  
  --gradient-primary: linear-gradient(135deg, hsl(280 70% 45%), hsl(210 60% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(280 20% 96%), hsl(280 30% 97%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(280 30% 97%));
  --shadow-glow: 0 10px 40px -10px hsl(280 70% 45% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(220 15% 15% / 0.1);
  
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 220 15% 26%;
  --sidebar-primary: 280 70% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 280 20% 96%;
  --sidebar-accent-foreground: 220 15% 15%;
  --sidebar-border: 280 25% 91%;
  --sidebar-ring: 280 70% 45%;
}

/* ============================================
   SCI-FI SCHEME - Neon Cyan & Pink
   Dark cyber backgrounds with neon cyan primary,
   deep purple secondary, and neon pink accent
   ============================================ */
.color-scifi {
  /* Dark Cyber Backgrounds */
  --background: 230 25% 8%;
  --foreground: 180 70% 90%;

  --card: 230 25% 11%;
  --card-foreground: 180 70% 90%;

  --popover: 230 25% 11%;
  --popover-foreground: 180 70% 90%;

  /* Neon Cyan - Primary */
  --primary: 180 100% 50%;
  --primary-foreground: 230 25% 8%;
  --primary-glow: 180 100% 65%;

  /* Deep Purple - Secondary */
  --secondary: 270 50% 25%;
  --secondary-foreground: 180 70% 90%;

  --muted: 230 25% 15%;
  --muted-foreground: 230 15% 60%;

  /* Neon Pink - Accent */
  --accent: 320 100% 60%;
  --accent-foreground: 230 25% 8%;
  --accent-glow: 320 100% 70%;

  --destructive: 0 85% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 230 25% 22%;
  --input: 230 25% 18%;
  --ring: 180 100% 50%;
  --radius: 0.25rem;

  --gold-shimmer: 180 100% 65%;
  --emerald-glow: 320 100% 70%;
  --ruby-glow: 0 85% 60%;
  --slate-deep: 230 25% 5%;

  --gradient-gold: linear-gradient(135deg, hsl(180 100% 45%), hsl(320 100% 55%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(180 100% 40%), hsl(320 100% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(230 25% 6%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(230 25% 6%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.5);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.4);
  --shadow-slate: 0 4px 20px -4px hsl(230 25% 5% / 0.6);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.5);
  --shadow-card: 0 4px 20px -4px hsl(230 25% 4% / 0.6);
  
  --sidebar-background: 230 25% 8%;
  --sidebar-foreground: 180 70% 90%;
  --sidebar-primary: 180 100% 50%;
  --sidebar-primary-foreground: 230 25% 8%;
  --sidebar-accent: 270 50% 25%;
  --sidebar-accent-foreground: 180 70% 90%;
  --sidebar-border: 230 25% 22%;
  --sidebar-ring: 180 100% 50%;
}

.color-scifi.light {
  --background: 200 30% 97%;
  --foreground: 230 25% 12%;

  --card: 200 25% 100%;
  --card-foreground: 230 25% 12%;

  --popover: 200 25% 100%;
  --popover-foreground: 230 25% 12%;

  --primary: 180 85% 40%;
  --primary-foreground: 0 0% 100%;

  --secondary: 270 40% 50%;
  --secondary-foreground: 0 0% 100%;

  --muted: 200 20% 95%;
  --muted-foreground: 230 20% 40%;

  --accent: 320 80% 50%;
  --accent-foreground: 0 0% 100%;

  --border: 200 20% 85%;
  --input: 200 25% 90%;
  --ring: 180 85% 40%;
  
  --gradient-primary: linear-gradient(135deg, hsl(180 85% 40%), hsl(320 80% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(200 20% 95%), hsl(200 30% 97%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(200 30% 97%));
  --shadow-glow: 0 10px 40px -10px hsl(180 85% 40% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(230 25% 12% / 0.1);
  
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 230 20% 26%;
  --sidebar-primary: 180 85% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 200 15% 96%;
  --sidebar-accent-foreground: 230 25% 12%;
  --sidebar-border: 200 20% 91%;
  --sidebar-ring: 180 85% 40%;
}

/* ============================================
   D&D SCHEME - Dragon Red & Antique Gold
   Parchment dark backgrounds with dragon red primary,
   antique gold secondary, and royal purple accent
   ============================================ */
.color-dnd {
  /* Parchment Dark Backgrounds */
  --background: 25 30% 10%;
  --foreground: 45 50% 88%;

  --card: 25 28% 13%;
  --card-foreground: 45 50% 88%;

  --popover: 25 28% 13%;
  --popover-foreground: 45 50% 88%;

  /* Dragon Red - Primary */
  --primary: 0 75% 50%;
  --primary-foreground: 45 50% 95%;
  --primary-glow: 0 80% 60%;

  /* Antique Gold - Secondary */
  --secondary: 45 60% 30%;
  --secondary-foreground: 45 50% 88%;

  --muted: 25 25% 16%;
  --muted-foreground: 25 15% 60%;

  /* Royal Purple - Accent */
  --accent: 270 60% 55%;
  --accent-foreground: 45 50% 95%;
  --accent-glow: 270 65% 65%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 25 25% 25%;
  --input: 25 28% 18%;
  --ring: 0 75% 50%;
  --radius: 0.375rem;

  --gold-shimmer: 45 100% 65%;
  --emerald-glow: 270 65% 65%;
  --ruby-glow: 0 80% 60%;
  --slate-deep: 25 30% 6%;

  --gradient-gold: linear-gradient(135deg, hsl(0 80% 50%), hsl(45 90% 60%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(0 75% 45%), hsl(50 85% 55%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(25 30% 8%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(25 30% 8%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.5);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.4);
  --shadow-slate: 0 4px 20px -4px hsl(25 30% 6% / 0.6);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(25 30% 5% / 0.5);
  
  --sidebar-background: 25 30% 10%;
  --sidebar-foreground: 45 50% 88%;
  --sidebar-primary: 0 75% 50%;
  --sidebar-primary-foreground: 45 50% 95%;
  --sidebar-accent: 25 25% 16%;
  --sidebar-accent-foreground: 45 50% 88%;
  --sidebar-border: 25 25% 25%;
  --sidebar-ring: 0 75% 50%;
}

.color-dnd.light {
  --background: 40 40% 97%;
  --foreground: 25 30% 15%;

  --card: 40 35% 100%;
  --card-foreground: 25 30% 15%;

  --popover: 40 35% 100%;
  --popover-foreground: 25 30% 15%;

  --primary: 0 65% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 45 50% 45%;
  --secondary-foreground: 0 0% 100%;

  --muted: 40 30% 95%;
  --muted-foreground: 25 25% 40%;

  --accent: 270 50% 50%;
  --accent-foreground: 0 0% 100%;

  --border: 40 25% 85%;
  --input: 40 30% 90%;
  --ring: 0 65% 45%;
  
  --gradient-primary: linear-gradient(135deg, hsl(0 65% 45%), hsl(45 75% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(40 30% 95%), hsl(40 40% 97%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(40 40% 97%));
  --shadow-glow: 0 10px 40px -10px hsl(0 65% 45% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(25 30% 15% / 0.1);
  
  --sidebar-background: 40 20% 98%;
  --sidebar-foreground: 25 20% 26%;
  --sidebar-primary: 0 65% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 40 15% 96%;
  --sidebar-accent-foreground: 25 30% 15%;
  --sidebar-border: 40 20% 91%;
  --sidebar-ring: 0 65% 45%;
}

/* ============================================
   STEAMPUNK SCHEME - Brass & Copper
   Dark Victorian backgrounds with brass primary
   and copper accent
   ============================================ */
.color-steampunk {
  /* Dark Victorian Backgrounds */
  --background: 30 20% 10%;
  --foreground: 40 30% 85%;

  --card: 30 18% 13%;
  --card-foreground: 40 30% 85%;

  --popover: 30 18% 13%;
  --popover-foreground: 40 30% 85%;

  /* Brass - Primary */
  --primary: 45 70% 50%;
  --primary-foreground: 30 20% 10%;
  --primary-glow: 45 80% 60%;

  --secondary: 25 45% 25%;
  --secondary-foreground: 40 30% 85%;

  --muted: 30 15% 18%;
  --muted-foreground: 30 15% 60%;

  /* Copper - Accent */
  --accent: 20 70% 50%;
  --accent-foreground: 30 20% 10%;
  --accent-glow: 20 80% 60%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 30 20% 25%;
  --input: 30 18% 18%;
  --ring: 45 70% 50%;
  --radius: 0.125rem;

  --gold-shimmer: 45 80% 65%;
  --emerald-glow: 20 80% 60%;
  --ruby-glow: 0 70% 55%;
  --slate-deep: 30 20% 6%;

  --gradient-gold: linear-gradient(135deg, hsl(45 75% 50%), hsl(20 80% 55%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(45 70% 45%), hsl(15 85% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(30 20% 8%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(30 20% 8%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.5);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.4);
  --shadow-slate: 0 4px 20px -4px hsl(30 20% 6% / 0.6);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(30 20% 5% / 0.5);
  
  --sidebar-background: 30 20% 10%;
  --sidebar-foreground: 40 30% 85%;
  --sidebar-primary: 45 70% 50%;
  --sidebar-primary-foreground: 30 20% 10%;
  --sidebar-accent: 25 45% 25%;
  --sidebar-accent-foreground: 40 30% 85%;
  --sidebar-border: 30 20% 25%;
  --sidebar-ring: 45 70% 50%;
}

.color-steampunk.light {
  --background: 40 35% 96%;
  --foreground: 30 20% 15%;

  --card: 40 30% 100%;
  --card-foreground: 30 20% 15%;

  --popover: 40 30% 100%;
  --popover-foreground: 30 20% 15%;

  --primary: 45 65% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 20 55% 50%;
  --secondary-foreground: 0 0% 100%;

  --muted: 40 25% 94%;
  --muted-foreground: 30 15% 40%;

  --accent: 20 60% 45%;
  --accent-foreground: 0 0% 100%;

  --border: 40 20% 82%;
  --input: 40 25% 88%;
  --ring: 45 65% 45%;
  
  --gradient-primary: linear-gradient(135deg, hsl(45 65% 45%), hsl(45 70% 55%));
  --gradient-secondary: linear-gradient(135deg, hsl(40 25% 94%), hsl(40 35% 96%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(40 35% 96%));
  --shadow-glow: 0 10px 40px -10px hsl(45 65% 45% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(30 20% 15% / 0.1);
  
  --sidebar-background: 40 20% 98%;
  --sidebar-foreground: 30 15% 26%;
  --sidebar-primary: 45 65% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 40 15% 96%;
  --sidebar-accent-foreground: 30 20% 15%;
  --sidebar-border: 40 15% 91%;
  --sidebar-ring: 45 65% 45%;
}

/* ============================================
   CYBERPUNK SCHEME - Hot Pink & Electric Cyan
   Dark noir backgrounds with hot pink primary
   and electric cyan accent
   ============================================ */
.color-cyberpunk {
  /* Dark Noir Backgrounds */
  --background: 260 30% 6%;
  --foreground: 180 100% 80%;

  --card: 260 25% 9%;
  --card-foreground: 180 100% 80%;

  --popover: 260 25% 9%;
  --popover-foreground: 180 100% 80%;

  /* Hot Pink - Primary */
  --primary: 325 90% 55%;
  --primary-foreground: 260 30% 6%;
  --primary-glow: 325 100% 65%;

  --secondary: 260 40% 20%;
  --secondary-foreground: 180 100% 80%;

  --muted: 260 25% 15%;
  --muted-foreground: 260 20% 55%;

  /* Electric Cyan - Accent */
  --accent: 180 100% 50%;
  --accent-foreground: 260 30% 6%;
  --accent-glow: 180 100% 60%;

  --destructive: 0 90% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 260 30% 22%;
  --input: 260 25% 15%;
  --ring: 325 90% 55%;
  --radius: 0rem;

  --gold-shimmer: 325 100% 70%;
  --emerald-glow: 180 100% 60%;
  --ruby-glow: 0 90% 60%;
  --slate-deep: 260 30% 4%;

  --gradient-gold: linear-gradient(135deg, hsl(325 95% 55%), hsl(180 100% 55%));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(325 90% 50%), hsl(180 100% 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(260 30% 4%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(260 30% 5%));

  --shadow-gold: 0 10px 40px -10px hsl(var(--primary) / 0.6);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.5);
  --shadow-slate: 0 4px 20px -4px hsl(260 30% 4% / 0.7);
  --shadow-glow: 0 10px 40px -10px hsl(var(--primary) / 0.6);
  --shadow-card: 0 4px 20px -4px hsl(260 30% 3% / 0.6);
  
  --sidebar-background: 260 30% 6%;
  --sidebar-foreground: 180 100% 80%;
  --sidebar-primary: 325 90% 55%;
  --sidebar-primary-foreground: 260 30% 6%;
  --sidebar-accent: 260 40% 20%;
  --sidebar-accent-foreground: 180 100% 80%;
  --sidebar-border: 260 30% 22%;
  --sidebar-ring: 325 90% 55%;
}

.color-cyberpunk.light {
  --background: 260 20% 96%;
  --foreground: 260 30% 15%;

  --card: 260 15% 100%;
  --card-foreground: 260 30% 15%;

  --popover: 260 15% 100%;
  --popover-foreground: 260 30% 15%;

  --primary: 325 80% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 180 70% 45%;
  --secondary-foreground: 0 0% 100%;

  --muted: 260 15% 94%;
  --muted-foreground: 260 20% 40%;

  --accent: 180 80% 40%;
  --accent-foreground: 0 0% 100%;

  --border: 260 15% 85%;
  --input: 260 15% 90%;
  --ring: 325 80% 50%;
  
  --gradient-primary: linear-gradient(135deg, hsl(325 80% 50%), hsl(180 80% 40%));
  --gradient-secondary: linear-gradient(135deg, hsl(260 15% 94%), hsl(260 20% 96%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(260 20% 96%));
  --shadow-glow: 0 10px 40px -10px hsl(325 80% 50% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(260 30% 15% / 0.1);
  
  --sidebar-background: 260 15% 98%;
  --sidebar-foreground: 260 20% 26%;
  --sidebar-primary: 325 80% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 260 15% 96%;
  --sidebar-accent-foreground: 260 30% 15%;
  --sidebar-border: 260 18% 91%;
  --sidebar-ring: 325 80% 50%;
}

/* ============================================
   VOLCANIC SCHEME - Molten Lava & Obsidian
   Obsidian black with molten orange and ember red
   ============================================ */
.color-volcanic {
  /* Obsidian Backgrounds */
  --background: 0 10% 6%;
  --foreground: 30 80% 92%;

  --card: 0 8% 9%;
  --card-foreground: 30 80% 92%;

  --popover: 0 8% 9%;
  --popover-foreground: 30 80% 92%;

  /* Molten Orange - Primary */
  --primary: 25 100% 55%;
  --primary-foreground: 0 0% 0%;
  --primary-glow: 20 100% 65%;

  --secondary: 0 15% 15%;
  --secondary-foreground: 30 80% 92%;

  --muted: 0 10% 12%;
  --muted-foreground: 0 10% 55%;

  /* Ember Red - Accent */
  --accent: 0 85% 55%;
  --accent-foreground: 0 0% 100%;
  --accent-glow: 0 90% 65%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 12% 20%;
  --input: 0 10% 12%;
  --ring: 25 100% 55%;
  --radius: 0.25rem;

  --gold-shimmer: 25 100% 70%;
  --emerald-glow: 0 90% 65%;
  --ruby-glow: 0 90% 60%;
  --slate-deep: 0 10% 4%;

  --gradient-gold: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(0 10% 4%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(0 10% 4%));

  --shadow-gold: 0 10px 50px -10px hsl(var(--primary) / 0.6);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.5);
  --shadow-slate: 0 4px 20px -4px hsl(0 10% 2% / 0.7);
  --shadow-glow: 0 10px 50px -10px hsl(var(--primary) / 0.6);
  --shadow-card: 0 4px 20px -4px hsl(0 10% 2% / 0.7);
  
  --sidebar-background: 0 10% 6%;
  --sidebar-foreground: 30 80% 92%;
  --sidebar-primary: 25 100% 55%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 15% 15%;
  --sidebar-accent-foreground: 30 80% 92%;
  --sidebar-border: 0 12% 20%;
  --sidebar-ring: 25 100% 55%;
}

.color-volcanic.light {
  --background: 30 40% 96%;
  --foreground: 0 10% 10%;

  --card: 0 0% 100%;
  --card-foreground: 0 10% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 10% 10%;

  --primary: 25 90% 48%;
  --primary-foreground: 0 0% 100%;

  --secondary: 30 25% 92%;
  --secondary-foreground: 0 10% 10%;

  --muted: 30 20% 94%;
  --muted-foreground: 0 10% 40%;

  --accent: 0 75% 48%;
  --accent-foreground: 0 0% 100%;

  --border: 30 20% 85%;
  --input: 30 20% 85%;
  --ring: 25 90% 48%;
  
  --gradient-primary: linear-gradient(135deg, hsl(25 90% 48%), hsl(0 75% 48%));
  --gradient-secondary: linear-gradient(135deg, hsl(30 25% 92%), hsl(30 40% 96%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(30 40% 96%));
  --shadow-glow: 0 10px 40px -10px hsl(25 90% 48% / 0.4);
  --shadow-card: 0 4px 20px -4px hsl(0 10% 10% / 0.1);
  
  --sidebar-background: 30 20% 98%;
  --sidebar-foreground: 0 10% 26%;
  --sidebar-primary: 25 90% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 30 15% 96%;
  --sidebar-accent-foreground: 0 10% 10%;
  --sidebar-border: 30 18% 91%;
  --sidebar-ring: 25 90% 48%;
}

/* ============================================
   ARCTIC SCHEME - Glacial Blue & Aurora Green
   Deep glacial blue with ice blue and aurora accents
   ============================================ */
.color-arctic {
  /* Glacial Backgrounds */
  --background: 210 50% 8%;
  --foreground: 200 30% 95%;

  --card: 210 45% 11%;
  --card-foreground: 200 30% 95%;

  --popover: 210 45% 11%;
  --popover-foreground: 200 30% 95%;

  /* Ice Blue - Primary */
  --primary: 200 100% 60%;
  --primary-foreground: 210 50% 8%;
  --primary-glow: 195 100% 70%;

  --secondary: 210 35% 18%;
  --secondary-foreground: 200 30% 95%;

  --muted: 210 30% 15%;
  --muted-foreground: 200 20% 60%;

  /* Aurora Green - Accent */
  --accent: 160 90% 50%;
  --accent-foreground: 210 50% 8%;
  --accent-glow: 155 95% 60%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 30% 25%;
  --input: 210 30% 15%;
  --ring: 200 100% 60%;
  --radius: 0.75rem;

  --gold-shimmer: 200 100% 70%;
  --emerald-glow: 160 95% 60%;
  --ruby-glow: 0 72% 55%;
  --slate-deep: 210 50% 5%;

  --gradient-gold: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-emerald: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-slate: linear-gradient(180deg, hsl(var(--card)), hsl(var(--slate-deep)));
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--card)), hsl(210 50% 6%));
  --gradient-card: linear-gradient(180deg, hsl(var(--card)), hsl(210 50% 6%));

  --shadow-gold: 0 10px 50px -10px hsl(var(--primary) / 0.5);
  --shadow-emerald: 0 10px 40px -10px hsl(var(--accent) / 0.4);
  --shadow-slate: 0 4px 20px -4px hsl(210 50% 4% / 0.6);
  --shadow-glow: 0 10px 50px -10px hsl(var(--primary) / 0.5);
  --shadow-card: 0 4px 20px -4px hsl(210 50% 4% / 0.6);
  
  --sidebar-background: 210 50% 8%;
  --sidebar-foreground: 200 30% 95%;
  --sidebar-primary: 200 100% 60%;
  --sidebar-primary-foreground: 210 50% 8%;
  --sidebar-accent: 210 35% 18%;
  --sidebar-accent-foreground: 200 30% 95%;
  --sidebar-border: 210 30% 25%;
  --sidebar-ring: 200 100% 60%;
}

.color-arctic.light {
  --background: 200 50% 97%;
  --foreground: 210 50% 10%;

  --card: 0 0% 100%;
  --card-foreground: 210 50% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 50% 10%;

  --primary: 200 85% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 200 30% 92%;
  --secondary-foreground: 210 50% 10%;

  --muted: 200 25% 94%;
  --muted-foreground: 200 20% 40%;

  --accent: 160 75% 40%;
  --accent-foreground: 0 0% 100%;

  --border: 200 25% 85%;
  --input: 200 25% 85%;
  --ring: 200 85% 45%;
  
  --gradient-primary: linear-gradient(135deg, hsl(200 85% 45%), hsl(160 75% 40%));
  --gradient-secondary: linear-gradient(135deg, hsl(200 30% 92%), hsl(200 50% 97%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(200 50% 97%));
  --shadow-glow: 0 10px 40px -10px hsl(200 85% 45% / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(210 50% 10% / 0.1);
  
  --sidebar-background: 200 30% 98%;
  --sidebar-foreground: 210 30% 26%;
  --sidebar-primary: 200 85% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 200 20% 96%;
  --sidebar-accent-foreground: 210 50% 10%;
  --sidebar-border: 200 22% 91%;
  --sidebar-ring: 200 85% 45%;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Gradient backgrounds */
.bg-gradient-gold {
  background: var(--gradient-gold);
}

.bg-gradient-emerald {
  background: var(--gradient-emerald);
}

.bg-gradient-slate {
  background: var(--gradient-slate);
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
}

.bg-gradient-card {
  background: var(--gradient-card);
}

/* Shadow utilities */
.shadow-gold {
  box-shadow: var(--shadow-gold);
}

.shadow-emerald {
  box-shadow: var(--shadow-emerald);
}

.shadow-slate {
  box-shadow: var(--shadow-slate);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

/* Text gradient */
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-emerald {
  background: var(--gradient-emerald);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smooth color transitions */
.transition-colors-theme {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover glow effect */
.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-glow-emerald:hover {
  box-shadow: var(--shadow-emerald);
}