/* Theme definitions for umuzika-saas.
   Colours are mapped to the app's CSS custom-property tokens so that switching
   html[data-theme] recolours the whole UI without touching individual
   components. Borrowed from the world-time / curator-board theme system.

   Token vocabulary (every theme must define all of these):
   --bg / --bg-raised / --bg-hover   page + surface backgrounds
   --text / --text-dim               primary + secondary text
   --accent / --accent-strong        primary hue + its emphatic partner
   --accent-2                        cool secondary hue (play button, stripes)
   --accent-3                        warm tertiary hue (stickers, knobs)
   --danger / --ok                   status colours
   --border                          component borders / hairlines
   --surface                         translucent panel fill over --bg
   --paper                           reel/window "white" and pale fills
   --shadow                          offset hard-shadow colour */

/* Default vintage cassette theme (the canonical UMUZIKA look) */
:root,
html[data-theme="umuzika"] {
  --bg: #efd1b7;
  --bg-raised: #f7e3cf;
  --bg-hover: #e8c5a4;
  --text: #363844;
  --text-dim: #756046;
  --accent: #d55e40;
  --accent-strong: #8b392e;
  --accent-2: #449ba2;
  --accent-3: #f3ae53;
  --danger: #c22f21;
  --ok: #6a8f4e;
  --border: #d55e40;
  --surface: rgba(255, 255, 255, 0.3);
  --paper: #ffffff;
  --shadow: rgba(54, 56, 68, 0.15);
}

/* The original dark-violet umuzika palette (DESIGN_PALETTE.md, pre re-skin) */
html[data-theme="umuzika-dark"] {
  --bg: #0f1115;
  --bg-raised: #181b22;
  --bg-hover: #222630;
  --text: #e8eaf0;
  --text-dim: #9aa1af;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-2: #38bdf8;
  --accent-3: #f59e0b;
  --danger: #ef4444;
  --ok: #34d399;
  --border: #2a2f3a;
  --surface: rgba(255, 255, 255, 0.04);
  --paper: #e8eaf0;
  --shadow: rgba(0, 0, 0, 0.35);
}

html[data-theme="world-time"] {
  --bg: #0a0f1c;
  --bg-raised: #0f1729;
  --bg-hover: #0c1322;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --accent: #34d399;
  --accent-strong: #6ee7b7;
  --accent-2: #38bdf8;
  --accent-3: #fbbf24;
  --danger: #f87171;
  --ok: #34d399;
  --border: #1e293b;
  --surface: rgba(255, 255, 255, 0.04);
  --paper: #e2e8f0;
  --shadow: rgba(0, 0, 0, 0.4);
}

html[data-theme="mobayilo"] {
  --bg: #0f172a;
  --bg-raised: #1e293b;
  --bg-hover: #162032;
  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --accent: #22c55e;
  --accent-strong: #4ade80;
  --accent-2: #38bdf8;
  --accent-3: #eab308;
  --danger: #ef4444;
  --ok: #22c55e;
  --border: #253346;
  --surface: rgba(255, 255, 255, 0.04);
  --paper: #f1f5f9;
  --shadow: rgba(0, 0, 0, 0.4);
}

html[data-theme="vesper"] {
  --bg: #0f111a;
  --bg-raised: #141726;
  --bg-hover: #1b1f33;
  --text: #f3e8e2;
  --text-dim: #9aa2c1;
  --accent: #89adff;
  --accent-strong: #c8d8ff;
  --accent-2: #7dd6c8;
  --accent-3: #ffd29d;
  --danger: #ff7a7a;
  --ok: #89adff;
  --border: #2a2f46;
  --surface: rgba(255, 255, 255, 0.05);
  --paper: #f3e8e2;
  --shadow: rgba(0, 0, 0, 0.45);
}

html[data-theme="catppuccin"] {
  --bg: #1e1e2e;
  --bg-raised: #181825;
  --bg-hover: #24273a;
  --text: #cdd6f4;
  --text-dim: #bac2de;
  --accent: #89b4fa;
  --accent-strong: #b4befe;
  --accent-2: #94e2d5;
  --accent-3: #f9e2af;
  --danger: #f38ba8;
  --ok: #a6e3a1;
  --border: #45475a;
  --surface: rgba(255, 255, 255, 0.05);
  --paper: #cdd6f4;
  --shadow: rgba(0, 0, 0, 0.4);
}

html[data-theme="tokyo-night"] {
  --bg: #151a2d;
  --bg-raised: #1a1f37;
  --bg-hover: #242b45;
  --text: #d5d6db;
  --text-dim: #a9b1d6;
  --accent: #7aa2f7;
  --accent-strong: #bb9af7;
  --accent-2: #7dcfff;
  --accent-3: #e0af68;
  --danger: #f7768e;
  --ok: #9ece6a;
  --border: #3b4261;
  --surface: rgba(255, 255, 255, 0.04);
  --paper: #d5d6db;
  --shadow: rgba(0, 0, 0, 0.45);
}

html[data-theme="gruvbox"] {
  --bg: #1d2021;
  --bg-raised: #282828;
  --bg-hover: #32302f;
  --text: #ebdbb2;
  --text-dim: #d5c4a1;
  --accent: #d79921;
  --accent-strong: #fabd2f;
  --accent-2: #83a598;
  --accent-3: #fe8019;
  --danger: #cc241d;
  --ok: #98971a;
  --border: #504945;
  --surface: rgba(235, 219, 178, 0.06);
  --paper: #ebdbb2;
  --shadow: rgba(0, 0, 0, 0.4);
}

html[data-theme="nord"] {
  --bg: #2e3440;
  --bg-raised: #3b4252;
  --bg-hover: #434c5e;
  --text: #eceff4;
  --text-dim: #d8dee9;
  --accent: #88c0d0;
  --accent-strong: #8fbcbb;
  --accent-2: #81a1c1;
  --accent-3: #ebcb8b;
  --danger: #bf616a;
  --ok: #a3be8c;
  --border: #4c566a;
  --surface: rgba(236, 239, 244, 0.05);
  --paper: #eceff4;
  --shadow: rgba(0, 0, 0, 0.35);
}

html[data-theme="osaka-jade"] {
  --bg: #111c18;
  --bg-raised: #172420;
  --bg-hover: #23372b;
  --text: #c1c497;
  --text-dim: #8aaa92;
  --accent: #509475;
  --accent-strong: #d7c995;
  --accent-2: #7ab3a3;
  --accent-3: #e0b968;
  --danger: #c4746e;
  --ok: #509475;
  --border: #2e4538;
  --surface: rgba(255, 255, 255, 0.04);
  --paper: #c1c497;
  --shadow: rgba(0, 0, 0, 0.45);
}

html[data-theme="catppuccin-latte"] {
  --bg: #eff1f5;
  --bg-raised: #ffffff;
  --bg-hover: #e6e9ef;
  --text: #4c4f69;
  --text-dim: #5c5f77;
  --accent: #7287fd;
  --accent-strong: #8839ef;
  --accent-2: #179299;
  --accent-3: #df8e1d;
  --danger: #d20f39;
  --ok: #40a02b;
  --border: #bcc0cc;
  --surface: rgba(255, 255, 255, 0.55);
  --paper: #ffffff;
  --shadow: rgba(76, 79, 105, 0.18);
}

html[data-theme="solarized-light"] {
  --bg: #fdf6e3;
  --bg-raised: #fffdf7;
  --bg-hover: #eee8d5;
  --text: #586e75;
  --text-dim: #657b83;
  --accent: #268bd2;
  --accent-strong: #2aa198;
  --accent-2: #2aa198;
  --accent-3: #b58900;
  --danger: #dc322f;
  --ok: #859900;
  --border: #d0c7b1;
  --surface: rgba(255, 255, 255, 0.5);
  --paper: #fffdf7;
  --shadow: rgba(88, 110, 117, 0.18);
}

html[data-theme="rose-pine-dawn"] {
  --bg: #faf4ed;
  --bg-raised: #fffaf4;
  --bg-hover: #f2e9e1;
  --text: #575279;
  --text-dim: #6e6a86;
  --accent: #907aa9;
  --accent-strong: #d7827e;
  --accent-2: #56949f;
  --accent-3: #ea9d34;
  --danger: #b4637a;
  --ok: #56949f;
  --border: #dfdad9;
  --surface: rgba(255, 255, 255, 0.55);
  --paper: #fffaf4;
  --shadow: rgba(87, 82, 121, 0.15);
}