/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  /* Brand */
  --coral: #f19766;
  --teal: #2a7c73;
  --light-teal: #6faf9c;
  --navy: #07273F;
  --charcoal: #3d474d;
  --cream: #f6f3ee;
  --track-light: #e8e4de;
  --track-dark: #2a3a4a;

  /* Light theme (default) */
  --bg: var(--cream);
  --bg-panel: #eee9e2;
  --text: var(--charcoal);
  --text-muted: #8a9099;
  --accent: var(--coral);
  --ring-track: var(--track-light);
  --completed: var(--teal);
  --border: #ddd6cc;
  --modal-bg: #fff;
  --modal-overlay: rgba(0,0,0,0.35);
  --hover-bg: rgba(241,151,102,0.08);
  --active-bg: rgba(241,151,102,0.14);
  --btn-bg: var(--cream);
  --btn-hover: #ece7e0;
  --toast-bg: var(--charcoal);
  --toast-text: var(--cream);
  --danger: #d96b5a;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

[data-theme="dark"] {
  --bg: var(--navy);
  --bg-panel: #0a2e47;
  --text: var(--cream);
  --text-muted: #8a9aaa;
  --accent: var(--coral);
  --ring-track: var(--track-dark);
  --completed: var(--light-teal);
  --border: #1e3a52;
  --modal-bg: #0e3355;
  --modal-overlay: rgba(0,0,0,0.55);
  --hover-bg: rgba(241,151,102,0.1);
  --active-bg: rgba(241,151,102,0.18);
  --btn-bg: #0a2e47;
  --btn-hover: #143d5a;
  --toast-bg: var(--cream);
  --toast-text: var(--navy);
  --shadow: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

/* Starry Night — deep indigo sky with transparent UI */
[data-bg-theme="starryNight"] {
  --bg: #0b0e2a;
  --bg-panel: rgba(8, 10, 36, 0.65);
  --text: #e8e0f0;
  --text-muted: #9a8fbf;
  --accent: #c89bff;
  --ring-track: rgba(255,255,255,0.1);
  --completed: #7dd3c0;
  --border: rgba(255,255,255,0.1);
  --modal-bg: rgba(12, 14, 45, 0.9);
  --modal-overlay: rgba(0,0,0,0.6);
  --hover-bg: rgba(200,155,255,0.1);
  --active-bg: rgba(200,155,255,0.18);
  --btn-bg: rgba(8, 10, 36, 0.6);
  --btn-hover: rgba(20, 22, 60, 0.8);
  --toast-bg: rgba(200,155,255,0.9);
  --toast-text: #0b0e2a;
  --shadow: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* Growing Tree — cheerful daytime scene */
[data-bg-theme="growingTree"] {
  --bg: #87CEEB;
  --bg-panel: rgba(210, 190, 160, 0.85);
  --text: #2d3a1e;
  --text-muted: #5a6e42;
  --accent: #e88a3a;
  --ring-track: rgba(0,0,0,0.08);
  --completed: #2a7c3a;
  --border: rgba(0,0,0,0.1);
  --modal-bg: rgba(245, 250, 240, 0.95);
  --modal-overlay: rgba(0,0,0,0.3);
  --hover-bg: rgba(232,138,58,0.12);
  --active-bg: rgba(232,138,58,0.2);
  --btn-bg: rgba(255,255,255,0.5);
  --btn-hover: rgba(255,255,255,0.7);
  --toast-bg: #2d5016;
  --toast-text: #f5fae0;
  --shadow: 0 2px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
}