/* ==========================================================================
   Design tokens
   Valeurs relevées sur la page source (thème Encore "dark" de Spotify).
   Toute la charte passe par ces variables : ne jamais écrire une couleur
   ou une taille en dur ailleurs dans le projet.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --bg-base: #121212;              /* fond global de la page */
  --bg-black: #000;                /* header + footer */
  --bg-highlight: #1f1f1f;         /* survol des lignes de tableau */
  --bg-elevated-base: #1f1f1f;     /* accordéon FAQ ouvert */
  --bg-elevated-highlight: #2a2a2a;/* accordéon FAQ survolé */
  --bg-card: #242424;              /* cartes d'abonnement */
  --bg-table: #1a1a1a;             /* tableau comparatif */
  --bg-tinted-highlight: rgba(255, 255, 255, 0.14);
  --bg-social: #222326;            /* pastilles réseaux sociaux */

  /* --- Texte ------------------------------------------------------------- */
  --text-base: #fff;
  --text-subdued: #b3b3b3;
  --text-marginal: #a7a7a7;        /* mentions légales, sous-prix */
  --text-header-secondary: #d9dadc;/* "S'inscrire" / "Connexion" */
  --text-footer-heading: #919496;  /* titres de colonnes du footer */
  --text-footer-secondary: #919496;
  --text-bright-accent: #1ed760;   /* vert Spotify (états de survol) */

  /* --- Traits ------------------------------------------------------------ */
  --border-table: #d9dadc;
  --border-hairline: rgba(255, 255, 255, 0.14);
  --border-card-divider: rgba(255, 255, 255, 0.15);
  --border-button-secondary: #7f7f7f;

  /* --- Accents par abonnement -------------------------------------------- */
  --plan-personal: #ffd2d7;        /* rose  */
  --plan-student: #c4b1d4;         /* mauve */
  --plan-duo: #ffc862;             /* jaune */
  --plan-family: #a5bbd1;          /* bleu  */

  /* --- Typographie ------------------------------------------------------- */
  --font-body: "SpotifyMixUI", "CircularSp", Helvetica, Arial, sans-serif;
  --font-title: "SpotifyMixUITitle", "SpotifyMixUI", Helvetica, Arial, sans-serif;
  --font-title-variable: "SpotifyMixUITitleVariable", "SpotifyMixUITitle",
    Helvetica, Arial, sans-serif;

  /* Échelle typographique (valeurs sources)                                 */
  --fs-marginal: 12px;             /* mentions légales                        */
  --fs-small: 14px;                /* prix secondaire, tooltip                */
  --fs-body: 16px;                 /* corps de texte, liens de nav            */
  --fs-lead: 18px;                 /* question de FAQ, sous-titre mobile      */
  --fs-title-s: 24px;
  --fs-title-m: 32px;              /* titres de section, nom d'abonnement     */
  --fs-title-l: 40px;              /* titres de section ≥ 1200px              */

  /* --- Rayons ------------------------------------------------------------ */
  --radius-card: 10px;
  --radius-button: 500px;          /* pilule */
  --radius-cta-card: 20px;
  --radius-badge: 6px 0 6px 0;
  --radius-payment: 5px;

  /* --- Espacements ------------------------------------------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* --- Largeurs de conteneur (Bootstrap-like, comme la source) ------------ */
  --container-sm: 750px;           /* ≥ 768px  */
  --container-md: 970px;           /* ≥ 992px  */
  --container-lg: 1170px;          /* ≥ 1200px */

  /* --- Mouvement --------------------------------------------------------- */
  --ease-productive: cubic-bezier(0.3, 0, 0, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --button-hover-scale: 1.04;

  /* --- Élévation --------------------------------------------------------- */
  --z-header: 1020;
  --z-overlay: 1030;
}