/* ------------------------------------------------------------------
   Design tokens — colour, type, spacing, motion.
   --accent is LIVE: repainted per section by js/modules/tracks.js,
   the same idea as Breeze painting its UI from the playing song.
   ------------------------------------------------------------------ */

:root{
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1200px;
  --player-h:76px;
  /* accent is LIVE — repainted per track by JS, like Breeze paints its UI from the song */
  --accent:#F5B8C8;
  --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 22%,transparent);
}
html[data-theme="dark"]{
  --bg:#0A0A0C; --bg-2:#111114; --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.065); --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);
  --text:#F4F4F6; --text-2:#A9A9B4; --text-3:#6E6E7A;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --chip:rgba(255,255,255,.05);
  --vinyl:#131316; --groove:rgba(255,255,255,.05);
}
html[data-theme="light"]{
  --bg:#FAF8F7; --bg-2:#FFFFFF; --surface:rgba(20,16,22,.03);
  --surface-2:rgba(20,16,22,.055); --border:rgba(20,16,22,.10);
  --border-2:rgba(20,16,22,.18);
  --text:#17141B; --text-2:#57525F; --text-3:#8D8896;
  --shadow:0 24px 50px -24px rgba(50,25,45,.25);
  --chip:rgba(20,16,22,.045);
  --vinyl:#242226; --groove:rgba(255,255,255,.075);
}