/* Design tokens: the single source of truth for colour, type, motion, layout. */

:root {
  color-scheme: dark;

  /* Surfaces — Spotify's elevation ladder: black page, base panel, raised card. */
  --black: #000;
  --base: #121212;
  --base-soft: #1a1a1a;
  --elevated: #181818;
  --elevated-hover: #282828;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --row-hover: rgba(255, 255, 255, 0.07);
  --scrim: rgba(0, 0, 0, 0.6);

  /* Brand */
  --green: #1ed760;
  --green-press: #1db954;
  --green-bright: #3be477;
  --green-glow: rgba(30, 215, 96, 0.32);
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --on-green: #000;

  /* Ink */
  --text: #fff;
  --subdued: #b3b3b3;
  --quiet: #8b8b8b;

  /* Accent sampled from the current artwork by js/color.js */
  --accent: #2b4d3a;
  --accent-strong: #3d6b4f;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 500px;

  /* Elevation */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-cover: 0 10px 46px rgba(0, 0, 0, 0.62);
  --shadow-fab: 0 8px 18px rgba(0, 0, 0, 0.44);
  --shadow-bar: 0 -8px 32px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 4px rgba(30, 215, 96, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.3, 0, 0, 1);
  --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;

  /* Layout */
  --gap: 8px;
  --sidebar-w: 268px;
  --player-h: 84px;
  --tabbar-h: 60px;
  --pad-panel: clamp(16px, 2.4vw, 32px);

  /* Type */
  --font: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --tracking-tight: -0.035em;
  --tracking-label: 0.11em;
}