/* ==========================================================================
   TOKENS — source unique de vérité du design.
   Aucune couleur, taille, espacement, rayon ou durée en dur ailleurs.
   ========================================================================== */
:root {
  /* Couleurs — palette */
  --velvet-900: #1a0a0f;
  --velvet-800: #2a0f17;
  --velvet-700: #4b1724;
  --velvet-500: #762d3d;
  --gold-500: #c9a45c;
  --gold-300: #e3cc98;
  --paper-100: #f6ece1;
  --paper-200: #ece0cd;
  --ink-900: #1c1412;
  --ink-600: #6d5c52;
  --black-900: #060304;

  /* Couleurs — rôles (ce sont ceux-là qu'on utilise dans les composants) */
  --c-bg: var(--velvet-900);
  --c-bg-raised: var(--velvet-800);
  --c-bg-paper: var(--paper-100);
  --c-text: var(--paper-100);
  --c-text-muted: color-mix(in srgb, var(--paper-100) 62%, transparent);
  --c-text-on-paper: var(--ink-900);
  --c-text-muted-on-paper: var(--ink-600);
  --c-accent: var(--gold-500);
  --c-accent-soft: var(--gold-300);
  --c-line: color-mix(in srgb, var(--gold-500) 28%, transparent);
  --c-line-strong: color-mix(in srgb, var(--gold-500) 60%, transparent);
  --c-overlay: color-mix(in srgb, var(--velvet-900) 72%, transparent);
  --c-focus: var(--gold-300);

  /* Lecteur audio : fond bordeaux, waveform noire, partie lue en doré très foncé */
  --c-player-bg: color-mix(in srgb, var(--velvet-800) 94%, transparent);
  --c-wave: var(--black-900);
  --c-wave-played: color-mix(in srgb, var(--gold-500) 38%, var(--black-900));
  --c-error: #ff9b8f;
  --c-success: #a9d9a0;

  /* Typographie — familles */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Typographie — échelle fluide (mobile → desktop) */
  --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --fs-md: clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  --fs-xl: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --fs-2xl: clamp(2.4rem, 1.6rem + 4vw, 5rem);
  --fs-3xl: clamp(3rem, 1.8rem + 6vw, 7.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  --tracking-caps: 0.22em;
  --tracking-tight: -0.01em;

  /* Espacements (base 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 10rem;
  --section-y: clamp(var(--sp-8), 10vw, var(--sp-10));
  --gutter: clamp(var(--sp-5), 5vw, var(--sp-8));

  /* Layout */
  --w-content: 72rem;
  --w-text: 38rem;
  --header-h: 4.5rem;
  --player-h: 6.5rem;

  /* Formes */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --border: 1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);

  /* Profondeur */
  --shadow-soft: 0 10px 40px color-mix(in srgb, #000 45%, transparent);
  --shadow-logo: 0 0 2.5rem color-mix(in srgb, var(--black-900) 65%, transparent);
  --blur: 14px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 900ms;

  /* Couches */
  --z-base: 1;
  --z-header: 50;
  --z-player: 60;
  --z-consent: 80;

  color-scheme: dark;
}
@media (max-width: 40rem) { :root { --player-h: 5rem; } }