/* css/variables.css — Premium Spotify & Tidal Inspired Design System */

:root {
  /* Dynamic Accent Color (Default Tokki Sky Blue) */
  --bias: #38bdf8;
  --bias-rgb: 56, 189, 248;
  --bias-glow: rgba(56, 189, 248, 0.28);
  --bias-glow-soft: rgba(56, 189, 248, 0.08);

  /* Platform Brand Colors (Deep-Link Integrations) */
  --spotify-green: #1db954;
  --apple-music: #fc3c44;
  --youtube-red: #ff0000;
  --melon-green: #00cd3c;
  --tidal-cyan: #00ffff;
  --bandcamp-blue: #629aa9;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Easing & Micro-Animations */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --tr-fast: 0.14s var(--ease-smooth);
  --tr-norm: 0.24s var(--ease-spring);
  --tr-slow: 0.45s var(--ease-spring);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Layout */
  --max-width: 1280px;
  --header-height: 68px;
  --dock-height: 76px;
}

/* Spotify/Tidal Pure Dark Mode (Default) */
:root, [data-theme="dark"] {
  --bg: #070709;
  --bg-gradient: radial-gradient(circle at 50% -10%, rgba(var(--bias-rgb), 0.12) 0%, transparent 55%), #070709;
  --bg-card: #111115;
  --bg-card-hover: #17171d;
  --bg-card-active: #1e1e26;
  --bg-subtle: #181820;
  --bg-dock: rgba(13, 13, 17, 0.92);

  --line: #20202a;
  --line-light: #2c2c3a;
  --line-strong: #3e3e50;

  --fg: #ffffff;
  --fg-bright: #ffffff;
  --fg-mid: #9ca3af;
  --fg-dim: #6b7280;
  --fg-faint: #4b5563;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.85);
  --shadow-bias: 0 8px 28px rgba(var(--bias-rgb), 0.25);

  --glass-bg: rgba(9, 9, 12, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.04);
}

/* Tidal Hi-Fi Light Mode */
[data-theme="light"] {
  --bg: #f8f9fc;
  --bg-gradient: radial-gradient(circle at 50% -10%, rgba(var(--bias-rgb), 0.1) 0%, transparent 60%), #f8f9fc;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f5f9;
  --bg-card-active: #e8ebf2;
  --bg-subtle: #f0f2f7;
  --bg-dock: rgba(255, 255, 255, 0.94);

  --line: #dce0e8;
  --line-light: #cbcfd8;
  --line-strong: #9ca3af;

  --fg: #0f1117;
  --fg-bright: #000000;
  --fg-mid: #374151;
  --fg-dim: #6b7280;
  --fg-faint: #9ca3af;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-bias: 0 8px 24px rgba(var(--bias-rgb), 0.2);

  --glass-bg: rgba(248, 249, 252, 0.88);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.6);
}

/* Curated V1 palettes. The selected product theme never follows a fandom accent. */
[data-theme="night"] {
  --bg: #120d12;
  --bg-gradient: radial-gradient(circle at 50% -10%, rgba(var(--bias-rgb), 0.15) 0%, transparent 60%), #120d12;
  --bg-card: #1c141c;
  --bg-card-hover: #261a25;
  --bg-card-active: #302031;
  --bg-subtle: #241923;
  --line: #3b2738;
  --line-light: #53354c;
  --line-strong: #70475f;
  --fg: #fff4f2;
  --fg-bright: #fffaf8;
  --fg-mid: #c9b4be;
  --fg-dim: #a88f9b;
  --fg-faint: #785f6b;
  --bg-dock: rgba(22, 14, 22, .94);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 8px 30px rgba(0,0,0,.58);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.78);
  --shadow-bias: 0 8px 28px rgba(var(--bias-rgb), .25);
  --glass-bg: rgba(20, 12, 20, .84);
  --glass-border: rgba(255,255,255,.1);
  --glass-highlight: rgba(255,255,255,.05);
}

[data-theme="holographic"] {
  --bg: #100b1d;
  --bg-gradient: radial-gradient(circle at 10% 0%, rgba(255, 111, 190, .18), transparent 42%), radial-gradient(circle at 90% 0%, rgba(var(--bias-rgb), .16), transparent 48%), #100b1d;
  --bg-card: #18132a;
  --bg-card-hover: #211a39;
  --bg-card-active: #2b2248;
  --bg-subtle: #211a37;
  --line: #3d3160;
  --line-light: #55427b;
  --line-strong: #7560a7;
  --fg: #f7f2ff;
  --fg-bright: #fffaff;
  --fg-mid: #c9c0df;
  --fg-dim: #a097bf;
  --fg-faint: #756b98;
  --bg-dock: rgba(19, 13, 34, .94);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.42);
  --shadow-md: 0 8px 30px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.74);
  --shadow-bias: 0 8px 28px rgba(var(--bias-rgb), .28);
  --glass-bg: rgba(18, 12, 34, .84);
  --glass-border: rgba(255,255,255,.11);
  --glass-highlight: rgba(255,255,255,.06);
}

[data-theme="jewel"] {
  --bg: #170b15;
  --bg-gradient: radial-gradient(circle at 50% -10%, rgba(216, 107, 138, .16) 0%, transparent 58%), #170b15;
  --bg-card: #24121f;
  --bg-card-hover: #311828;
  --bg-card-active: #3a1d31;
  --bg-subtle: #2c1727;
  --line: #4d293e;
  --line-light: #6c3a56;
  --line-strong: #8c4b6c;
  --fg: #fff2f4;
  --fg-bright: #fff9fa;
  --fg-mid: #d2b9c3;
  --fg-dim: #b0919e;
  --fg-faint: #876b79;
  --bg-dock: rgba(29, 13, 24, .94);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.46);
  --shadow-md: 0 8px 30px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.8);
  --shadow-bias: 0 8px 28px rgba(var(--bias-rgb), .26);
  --glass-bg: rgba(31, 13, 26, .85);
  --glass-border: rgba(255,255,255,.1);
  --glass-highlight: rgba(255,255,255,.05);
}