/* ============================================================
   KATALIST — themes.css
   Brand palette, CSS variables, 12 global theme definitions
   ============================================================ */

:root {
  /* Brand fire palette (always available) */
  --fire-1: #ff0000;
  --fire-2: #ff4d00;
  --fire-3: #ff7400;
  --fire-4: #ff9a00;
  --fire-5: #ffc100;
  --cream:       #fefbf6;
  --cream-dark:  #f5efe6;
  --charcoal:       #2a2a2a;
  --charcoal-light: #4a4a4a;
  --charcoal-muted: #6a6a6a;

  /* Layout tokens */
  --player-height: 100px;
  --sidebar-width: 240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-display: 'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

/* ── KATALIST (signature dark + fire) ────────────────────── */
[data-theme="katalist"] {
  --bg-base:       #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #181818;
  --bg-overlay:    #202020;
  --bg-hover:      #252525;
  --border:        #ffffff0a;
  --border-strong: #ffffff14;
  --accent:        #ff4d00;
  --accent-dim:    #ff4d0018;
  --accent-glow:   #ff4d0033;
  --text-primary:  #fefbf6;
  --text-secondary:#b0a89a;
  --text-muted:    #5a5248;
  --text-accent:   #ff7400;
  --waveform:      #ff7400;
  --waveform-dim:  #ff740018;
  --danger:        #ff0000;
  --success:       #4fff8f;
  --warning:       #ffc100;
}

/* ── MIDNIGHT (OLED black + deep red) ────────────────────── */
[data-theme="midnight"] {
  --bg-base:       #000000;
  --bg-surface:    #080808;
  --bg-elevated:   #0f0f0f;
  --bg-overlay:    #141414;
  --bg-hover:      #1a1a1a;
  --border:        #ffffff07;
  --border-strong: #ffffff10;
  --accent:        #ff0000;
  --accent-dim:    #ff000025;
  --accent-glow:   #ff000040;
  --text-primary:  #fefbf6;
  --text-secondary:#9a9088;
  --text-muted:    #4a4440;
  --text-accent:   #ff2222;
  --waveform:      #ff2222;
  --waveform-dim:  #ff222218;
  --danger:        #ff0000;
  --success:       #4fff8f;
  --warning:       #ffc100;
}

/* ── STUDIO (warm cream light) ───────────────────────────── */
[data-theme="studio"] {
  --bg-base:       #f0ebe2;
  --bg-surface:    #fefbf6;
  --bg-elevated:   #e8e2d8;
  --bg-overlay:    #fefbf6;
  --bg-hover:      #e2dbd0;
  --border:        #2a2a2a12;
  --border-strong: #2a2a2a20;
  --accent:        #ff4d00;
  --accent-dim:    #ff4d0015;
  --accent-glow:   #ff4d0028;
  --text-primary:  #2a2a2a;
  --text-secondary:#5a5250;
  --text-muted:    #9a9088;
  --text-accent:   #ff4d00;
  --waveform:      #ff7400;
  --waveform-dim:  #ff740015;
  --danger:        #cc2200;
  --success:       #1a8840;
  --warning:       #c87800;
}

/* ── VOID (cosmic deep purple) ───────────────────────────── */
[data-theme="void"] {
  --bg-base:       #06000f;
  --bg-surface:    #0d0020;
  --bg-elevated:   #150030;
  --bg-overlay:    #1c003e;
  --bg-hover:      #22004c;
  --border:        #a855f725;
  --border-strong: #a855f738;
  --accent:        #a855f7;
  --accent-dim:    #a855f728;
  --accent-glow:   #a855f745;
  --text-primary:  #f5f0ff;
  --text-secondary:#d8c0ff;
  --text-muted:    #6d5a8a;
  --text-accent:   #c084fc;
  --waveform:      #8b5cf6;
  --waveform-dim:  #8b5cf618;
  --danger:        #ef4444;
  --success:       #22c55e;
  --warning:       #f59e0b;
}

/* ── NEON KOI (deep void + electric magenta + cyan + yellow) */
[data-theme="dusk"] {
  --bg-base:       #0a0118;
  --bg-surface:    #120228;
  --bg-elevated:   #1c0338;
  --bg-overlay:    #250448;
  --bg-hover:      #2e0558;
  --border:        #ff00ff20;
  --border-strong: #ff00ff35;
  --accent:        #ff00ff;
  --accent-dim:    #ff00ff30;
  --accent-glow:   #ff00ff55;
  --text-primary:  #00ffff;
  --text-secondary:#00dddd;
  --text-muted:    #006666;
  --text-accent:   #ffff00;
  --waveform:      #ffff00;
  --waveform-dim:  #ffff0020;
  --danger:        #ff4466;
  --success:       #00ff88;
  --warning:       #ffff00;
}

/* ── LOTUS (dark rose + soft pink) ───────────────────────── */
[data-theme="lotus"] {
  --bg-base:       #1a1016;
  --bg-surface:    #241620;
  --bg-elevated:   #2e1c2a;
  --bg-overlay:    #382235;
  --bg-hover:      #422840;
  --border:        #f472b620;
  --border-strong: #f472b630;
  --accent:        #f472b6;
  --accent-dim:    #f472b618;
  --accent-glow:   #f472b633;
  --text-primary:  #fff0f8;
  --text-secondary:#e0c0d0;
  --text-muted:    #8a6070;
  --text-accent:   #fb7dc3;
  --waveform:      #f472b6;
  --waveform-dim:  #f472b618;
  --danger:        #ef4444;
  --success:       #22c55e;
  --warning:       #f59e0b;
}

/* ── INK (monochrome minimal) ────────────────────────────── */
[data-theme="ink"] {
  --bg-base:       #030303;
  --bg-surface:    #0d0d0d;
  --bg-elevated:   #181818;
  --bg-overlay:    #222222;
  --bg-hover:      #2a2a2a;
  --border:        #ffffff0e;
  --border-strong: #ffffff1a;
  --accent:        #d4d4d4;
  --accent-dim:    #d4d4d428;
  --accent-glow:   #d4d4d440;
  --text-primary:  #f0f0f0;
  --text-secondary:#a0a0a0;
  --text-muted:    #505050;
  --text-accent:   #e0e0e0;
  --waveform:      #b0b0b0;
  --waveform-dim:  #b0b0b018;
  --danger:        #ef4444;
  --success:       #22c55e;
  --warning:       #f59e0b;
}

/* ── ARCTIC (dark navy + ice blue) ───────────────────────── */
[data-theme="arctic"] {
  --bg-base:       #000a1a;
  --bg-surface:    #001224;
  --bg-elevated:   #001e36;
  --bg-overlay:    #002a48;
  --bg-hover:      #00305a;
  --border:        #38bdf825;
  --border-strong: #38bdf838;
  --accent:        #38bdf8;
  --accent-dim:    #38bdf828;
  --accent-glow:   #38bdf845;
  --text-primary:  #ffffff;
  --text-secondary:#e0f4ff;
  --text-muted:    #4a7a96;
  --text-accent:   #7dd3fc;
  --waveform:      #38bdf8;
  --waveform-dim:  #38bdf818;
  --danger:        #ef4444;
  --success:       #22c55e;
  --warning:       #f59e0b;
}

/* ── JADE (deep emerald) ─────────────────────────────────── */
[data-theme="jade"] {
  --bg-base:       #011a13;
  --bg-surface:    #052e1e;
  --bg-elevated:   #064e3b;
  --bg-overlay:    #08604a;
  --bg-hover:      #0a7058;
  --border:        #34d39928;
  --border-strong: #34d39940;
  --accent:        #34d399;
  --accent-dim:    #34d39940;
  --accent-glow:   #34d39960;
  --text-primary:  #ecfdf5;
  --text-secondary:#a7f3d0;
  --text-muted:    #3d7a5a;
  --text-accent:   #6ee7b7;
  --waveform:      #10b981;
  --waveform-dim:  #10b98118;
  --danger:        #ef4444;
  --success:       #34d399;
  --warning:       #f59e0b;
}

/* ── INFERNO (volcanic dark red + fire amber) ────────────── */
[data-theme="amber"] {
  --bg-base:       #1a0000;
  --bg-surface:    #280000;
  --bg-elevated:   #3a0000;
  --bg-overlay:    #4e0000;
  --bg-hover:      #600000;
  --border:        #ff000022;
  --border-strong: #ff000035;
  --accent:        #ff0000;
  --accent-dim:    #ff000030;
  --accent-glow:   #ff000050;
  --text-primary:  #ffaa00;
  --text-secondary:#cc7700;
  --text-muted:    #cc7733;
  --text-accent:   #ff6600;
  --waveform:      #ff6600;
  --waveform-dim:  #ff660018;
  --danger:        #ff4444;
  --success:       #44ff88;
  --warning:       #ffaa00;
}

/* ── ABYSS (deep ocean black + electric teal + ember) ────── */
[data-theme="storm"] {
  --bg-base:       #0a0f14;
  --bg-surface:    #101820;
  --bg-elevated:   #18242e;
  --bg-overlay:    #1e2e3c;
  --bg-hover:      #24384a;
  --border:        #64ffda20;
  --border-strong: #64ffda35;
  --accent:        #64ffda;
  --accent-dim:    #64ffda30;
  --accent-glow:   #64ffda50;
  --text-primary:  #ffffff;
  --text-secondary:#ff7043;
  --text-muted:    #7a6055;
  --text-accent:   #ff5722;
  --waveform:      #ff5722;
  --waveform-dim:  #ff572220;
  --danger:        #ff5722;
  --success:       #4ade80;
  --warning:       #fbbf24;
}

/* ── SAKURA (soft blush light) ───────────────────────────── */
[data-theme="sakura"] {
  --bg-base:       #fff0f8;
  --bg-surface:    #fef3f8;
  --bg-elevated:   #fde8f3;
  --bg-overlay:    #fef3f8;
  --bg-hover:      #fddaee;
  --border:        #e8529a20;
  --border-strong: #e8529a30;
  --accent:        #e8529a;
  --accent-dim:    #e8529a18;
  --accent-glow:   #e8529a33;
  --text-primary:  #3d1a2d;
  --text-secondary:#7a3a5a;
  --text-muted:    #b87090;
  --text-accent:   #e8529a;
  --waveform:      #e8529a;
  --waveform-dim:  #e8529a18;
  --danger:        #dc2626;
  --success:       #16a34a;
  --warning:       #d97706;
}