/* ═══════════════════════════════════════════════════════════
   THEME SYSTEM -- 5 Themes with full CSS custom properties
   ═══════════════════════════════════════════════════════════ */

/* -- BASE (Grey) -- */
[data-theme="grey"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #3a3a3a;
  --bg-card: #2d2d2d;
  --bg-card-hover: #353535;
  --bg-overlay: rgba(0, 0, 0, 0.85);
  --bg-glass: rgba(45, 45, 45, 0.7);
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #6a6a6a;
  --accent: #7a7a7a;
  --accent-light: #9a9a9a;
  --accent-glow: rgba(122, 122, 122, 0.3);
  --border: #3a3a3a;
  --border-light: #4a4a4a;
  --shadow: rgba(0, 0, 0, 0.4);
  --gradient-1: #2a2a2a;
  --gradient-2: #1a1a1a;
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #f87171;
}

/* -- DARK -- */
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #0a0a0a;
  --bg-card: #0a0a0a;
  --bg-card-hover: #111111;
  --bg-overlay: rgba(0, 0, 0, 0.92);
  --bg-glass: rgba(10, 10, 10, 0.8);
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #666666;
  --accent: #4a4a4a;
  --accent-light: #6a6a6a;
  --accent-glow: rgba(74, 74, 74, 0.25);
  --border: #1a1a1a;
  --border-light: #2a2a2a;
  --shadow: rgba(0, 0, 0, 0.6);
  --gradient-1: #0a0a0a;
  --gradient-2: #000000;
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #f87171;
}

/* -- LIGHT -- */
[data-theme="light"] {
  --bg-primary: #f5f5f0;
  --bg-secondary: #ebebe4;
  --bg-tertiary: #e0e0d8;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f8f4;
  --bg-overlay: rgba(255, 255, 255, 0.92);
  --bg-glass: rgba(255, 255, 255, 0.7);
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #888888;
  --accent: #4a4a4a;
  --accent-light: #6a6a6a;
  --accent-glow: rgba(74, 74, 74, 0.15);
  --border: #d4d4cc;
  --border-light: #e0e0d8;
  --shadow: rgba(0, 0, 0, 0.08);
  --gradient-1: #ebebe4;
  --gradient-2: #f5f5f0;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
}

/* -- BROWN -- */
[data-theme="brown"] {
  --bg-primary: #1a1210;
  --bg-secondary: #2a1f1a;
  --bg-tertiary: #3a2c24;
  --bg-card: #2e221c;
  --bg-card-hover: #382a22;
  --bg-overlay: rgba(0, 0, 0, 0.88);
  --bg-glass: rgba(46, 34, 28, 0.7);
  --text-primary: #f0e6dc;
  --text-secondary: #b09880;
  --text-muted: #706050;
  --accent: #c4956a;
  --accent-light: #d4a87a;
  --accent-glow: rgba(196, 149, 106, 0.3);
  --border: #3a2c24;
  --border-light: #4a3830;
  --shadow: rgba(0, 0, 0, 0.45);
  --gradient-1: #2a1f1a;
  --gradient-2: #1a1210;
  --success: #86efac;
  --warning: #fde047;
  --error: #fca5a5;
}

/* -- CYAN / BABY BLUE -- */
[data-theme="cyan"] {
  --bg-primary: #0a1520;
  --bg-secondary: #0f1f30;
  --bg-tertiary: #152a3f;
  --bg-card: #112236;
  --bg-card-hover: #183048;
  --bg-overlay: rgba(0, 0, 0, 0.88);
  --bg-glass: rgba(17, 34, 54, 0.7);
  --text-primary: #d0eefa;
  --text-secondary: #7ab8d0;
  --text-muted: #4a8098;
  --accent: #5cbede;
  --accent-light: #7dd4f0;
  --accent-glow: rgba(92, 190, 222, 0.3);
  --border: #1a3550;
  --border-light: #244560;
  --shadow: rgba(0, 0, 0, 0.45);
  --gradient-1: #0f1f30;
  --gradient-2: #0a1520;
  --success: #6ee7b7;
  --warning: #fcd34d;
  --error: #fca5a5;
}

/* -- Theme transition -- */
body, .card, .nav, .modal, .btn, .theme-picker {
  transition: background-color 0.5s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}