/* Tokens de Reminiscencia (DESIGN §2). Tema oscuro único, con la distribución y los colores del reproductor web de Spotify.
   Figtree (SIL OFL 1.1, fonts/LICENSE-figtree.txt), autoalojada en los pesos 400, 600, 700 y 800. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/figtree-800.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Colores (DESIGN §2): los del reproductor web de Spotify. */
  --bg: #000000;
  --surface: #121212;
  --elevated: #1f1f1f;
  --highlight: #2a2a2a;
  --card: #181818;
  --card-hover: #282828;
  --text: #ffffff;
  --text-2: #b3b3b3;
  --accent: #1ed760;
  --accent-hover: #3be477;
  --on-accent: #000000;
  --separator: #3e3e3e;
  --outline: #7c7c7c;
  --slider-track: #4d4d4d;
  --danger: #e91429;
  --row-hover: rgba(255, 255, 255, 0.1);
  --tile: rgba(255, 255, 255, 0.1);
  --tile-hover: rgba(255, 255, 255, 0.2);

  /* Medidas */
  --gap: 8px;
  --radius: 8px;
  --radius-small: 4px;
  --topbar-h: 64px;
  --lib-w: clamp(280px, 22vw, 420px);
  --now-w: 300px;
  --player-h: 72px;
  --tabbar-h: 64px;
  --mini-h: 56px;
  --card-w: 180px;
  --row-h: 56px;
  --page-x: 24px;

  /* Tipografía */
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 12px;
  --text-s: 14px;
  --text-m: 16px;
  --text-l: 24px;
  --text-xl: 32px;
}

@media (max-width: 767px) {
  :root {
    --page-x: 16px;
  }
}