/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens)
   ═══════════════════════════════════════════ */

:root {
  /* Colors - Dark Mode (Default) */
  --bg: hsl(225, 25%, 5%);
  --fg: hsl(0, 0%, 95%);
  --card: hsl(225, 20%, 8%);
  --card-fg: hsl(0, 0%, 95%);
  --primary: hsl(24, 95%, 53%);
  --primary-fg: hsl(0, 0%, 100%);
  --secondary: hsl(225, 15%, 12%);
  --muted: hsl(225, 15%, 15%);
  --muted-fg: hsl(220, 10%, 55%);
  --border: hsl(225, 15%, 18%);
  --destructive: hsl(0, 84%, 60%);
  
  /* Glass Morphism */
  --glass-bg: hsla(225, 20%, 10%, 0.6);
  --glass-border: hsla(0, 0%, 100%, 0.08);
  --glass-border-hover: hsla(0, 0%, 100%, 0.15);
  
  /* Gradients & Glows */
  --glow-orange: hsl(24, 95%, 53%);
  --glow-amber: hsl(38, 92%, 50%);
  
  /* Spacing & Sizing */
  --radius: 0.75rem;
  --container-max: 1280px;
}

/* Light Mode */
.light {
  --bg: hsl(0, 0%, 98%);
  --fg: hsl(225, 25%, 10%);
  --card: hsl(0, 0%, 100%);
  --card-fg: hsl(225, 25%, 10%);
  --primary: hsl(24, 95%, 50%);
  --primary-fg: hsl(0, 0%, 100%);
  --secondary: hsl(225, 15%, 94%);
  --muted: hsl(225, 10%, 93%);
  --muted-fg: hsl(220, 10%, 40%);
  --border: hsl(225, 15%, 88%);
  --destructive: hsl(0, 84%, 60%);
  --glass-bg: hsla(0, 0%, 100%, 0.7);
  --glass-border: hsla(225, 15%, 10%, 0.08);
  --glass-border-hover: hsla(225, 15%, 10%, 0.15);
  --glow-orange: hsl(24, 95%, 50%);
  --glow-amber: hsl(38, 92%, 50%);
}