:root {
  /* Colors */
  --blue-dark: hsl(35, 18%, 10%);       /* Primary background and dark panels */
  --blue-navy: fill;                     /* Semantic placeholder */
  --blue-slate: hsl(35, 15%, 15%);      /* Cards and secondary sections */
  --blue-light: hsl(35, 12%, 22%);      /* Boarders, inputs, subtle dividers */
  --blue-hover: hsl(35, 12%, 28%);      /* Hover state for slate elements */
  
  --gold: hsl(217, 90%, 60%);             /* Premium accent color */
  --gold-light: hsl(212, 95%, 68%);       /* Brighter gold for hover/gradients */
  --gold-dark: hsl(222, 85%, 48%);        /* Darker gold for borders/text */
  
  --text-light: hsl(35, 20%, 96%);      /* Main light text */
  --text-muted: hsl(35, 15%, 75%);      /* Muted description text */
  --text-dark: hsl(220, 40%, 8%);        /* For potential light themed elements */
  
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --success: hsl(145, 80%, 40%);         /* Success messages */
  --error: hsl(0, 85%, 60%);             /* Error validations */

  /* Gradients */
  --gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  --blue-gradient: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-slate) 100%);
  --card-gradient: linear-gradient(135deg, rgba(47, 42, 35, 0.3) 0%, rgba(30, 26, 21, 0.6) 100%);

  /* Typography */
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 0 15px rgba(61, 132, 245, 0.3);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --border-gold-subtle: 1px solid rgba(61, 132, 245, 0.2);

  /* Layout Colors (Adaptable) */
  --nav-bg: rgba(30, 26, 21, 0.85);
  --card-bg-solid: rgba(47, 42, 35, 0.7);
  --key-card-bg: rgba(30, 26, 21, 0.4);
  --key-card-hover-bg: rgba(30, 26, 21, 0.7);
  --avatar-bg: rgba(255, 255, 255, 0.03);
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.1);
}

/* Light Theme Variables */
[data-theme="light"] {
  /* Colors Override */
  --blue-dark: hsl(42, 35%, 94%);        /* Soft light blue-gray background */
  --blue-slate: hsl(0, 0%, 100%);         /* Clean white cards/panels */
  --blue-light: hsl(42, 20%, 85%);       /* Light borders and separators */
  --blue-hover: hsl(42, 20%, 90%);       /* Light card hover */
  
  --text-light: hsl(38, 30%, 15%);       /* Dark slate gray text */
  --text-muted: hsl(38, 15%, 45%);       /* Slate gray description text */
  
  --border-glass: 1px solid rgba(30, 26, 21, 0.06);
  --border-gold-subtle: 1px solid rgba(61, 132, 245, 0.35);
  --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 250, 0.95) 100%);
  --blue-gradient: linear-gradient(180deg, hsl(210, 30%, 96%) 0%, hsl(210, 20%, 90%) 100%);
  
  /* Layout Colors (Light Theme) */
  --nav-bg: rgba(246, 244, 238, 0.85);
  --card-bg-solid: rgba(255, 255, 255, 0.9);
  --key-card-bg: rgba(255, 255, 255, 0.7);
  --key-card-hover-bg: rgba(30, 26, 21, 0.08);
  --avatar-bg: rgba(30, 26, 21, 0.03);
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border: rgba(30, 26, 21, 0.12);
}