/* ============================================
   BeatPractice — Theme Definitions
   
   Each theme overrides :root custom properties
   using the [data-theme] attribute selector.
   
   The default "Midnight" theme is defined in
   design-system.css — no overrides needed.
   ============================================ */

/* ─── Ember ───────────────────────────────── */
[data-theme="ember"] {
    /* Backgrounds — warm dark */
    --bg-deepest: #110a06;
    --bg-base: #181008;
    --bg-surface: #221810;
    --bg-card: #2a1e14;
    --bg-elevated: #352818;
    --bg-input: #2a1e14;

    /* Accent — amber / orange */
    --accent: #e8842a;
    --accent-hover: #f59844;
    --accent-glow: rgba(232, 132, 42, 0.25);
    --accent-dim: rgba(232, 132, 42, 0.12);

    /* Text */
    --text-primary: #f5ede6;
    --text-secondary: #a59382;
    --text-muted: #6e5d4e;
    --text-accent: #e8842a;
    --text-on-accent: #ffffff;

    /* Status */
    --color-success: #5ec26a;
    --color-warning: #e8b84a;
    --color-error: #e05c5c;
    --color-perfect: #5ec26a;
    --color-good: #e8842a;
    --color-ok: #e8b84a;
    --color-miss: #e05c5c;

    /* Borders */
    --border-subtle: rgba(255, 200, 140, 0.06);
    --border-default: rgba(255, 200, 140, 0.1);
    --border-accent: rgba(232, 132, 42, 0.4);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 1px rgba(255, 200, 140, 0.05);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 200, 140, 0.08);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Metronome */
    --metronome-hue: 25;
}

/* ─── Forest ──────────────────────────────── */
[data-theme="forest"] {
    /* Backgrounds — deep earthy green */
    --bg-deepest: #060e08;
    --bg-base: #0a150d;
    --bg-surface: #101e14;
    --bg-card: #15271a;
    --bg-elevated: #1c3222;
    --bg-input: #152a1a;

    /* Accent — emerald green */
    --accent: #2db868;
    --accent-hover: #3ed47c;
    --accent-glow: rgba(45, 184, 104, 0.25);
    --accent-dim: rgba(45, 184, 104, 0.12);

    /* Text */
    --text-primary: #e8f0ea;
    --text-secondary: #7fa58a;
    --text-muted: #4e7058;
    --text-accent: #2db868;
    --text-on-accent: #ffffff;

    /* Status */
    --color-success: #2db868;
    --color-warning: #d4a832;
    --color-error: #d45858;
    --color-perfect: #2db868;
    --color-good: #3a9dd4;
    --color-ok: #d4a832;
    --color-miss: #d45858;

    /* Borders */
    --border-subtle: rgba(140, 255, 180, 0.06);
    --border-default: rgba(140, 255, 180, 0.1);
    --border-accent: rgba(45, 184, 104, 0.4);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 1px rgba(140, 255, 180, 0.05);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 1px rgba(140, 255, 180, 0.08);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Metronome */
    --metronome-hue: 150;
}

/* ─── Sakura ──────────────────────────────── */
[data-theme="sakura"] {
    /* Backgrounds — deep rose-tinted dark */
    --bg-deepest: #0e070a;
    --bg-base: #150c10;
    --bg-surface: #1e1218;
    --bg-card: #28181f;
    --bg-elevated: #341e28;
    --bg-input: #28181f;

    /* Accent — soft pink */
    --accent: #d4628a;
    --accent-hover: #e87aa2;
    --accent-glow: rgba(212, 98, 138, 0.25);
    --accent-dim: rgba(212, 98, 138, 0.12);

    /* Text */
    --text-primary: #f2e8ec;
    --text-secondary: #a58892;
    --text-muted: #6e5562;
    --text-accent: #d4628a;
    --text-on-accent: #ffffff;

    /* Status */
    --color-success: #5ec26a;
    --color-warning: #e0b84a;
    --color-error: #d45858;
    --color-perfect: #5ec26a;
    --color-good: #d4628a;
    --color-ok: #e0b84a;
    --color-miss: #d45858;

    /* Borders */
    --border-subtle: rgba(255, 140, 180, 0.06);
    --border-default: rgba(255, 140, 180, 0.1);
    --border-accent: rgba(212, 98, 138, 0.4);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 1px rgba(255, 140, 180, 0.05);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 140, 180, 0.08);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Metronome */
    --metronome-hue: 340;
}