/* ============================================================
   Prepashow - Design Tokens
   Variables centrales : palette, typo, espacements, layout.
   Tout le site est écrit avec ces variables - une modif ici
   propage partout.
   ============================================================ */

:root {
  /* ===== Palette =====
     Ambiance "spectacle" : fond navy profond, texte crème, accent or.
     Conserve la palette du logo en inversant fond/texte (effet salle plongée
     dans le noir, scène éclairée).
  */
  /* Fonds : navy profond, comme une scène avant le lever de rideau */
  --color-bg:           #0b1631;     /* navy velours */
  --color-bg-soft:      #131f48;     /* sections alternées (un cran plus clair) */
  --color-surface:      #1c2c5a;     /* surface des cartes */

  /* Textes : crème chaleureuse, lisible sur navy */
  --color-text:         #fdfaf5;
  --color-text-soft:    #a8b3cc;     /* gris-bleu doux */
  --color-text-mute:    #6f7da0;

  /* Marque : or du logo, utilisée en CTA primaire (pop sur le navy) */
  --color-brand:        #c69a3a;
  --color-brand-hover:  #d8ad4d;
  --color-brand-soft:   rgba(198, 154, 58, 0.15);

  /* Accent : or également (highlights, eyebrows, mots clés) */
  --color-accent:       #c69a3a;
  --color-accent-hover: #d8ad4d;
  --color-accent-soft:  rgba(198, 154, 58, 0.18);

  /* Lumière : pour contrastes inverses (pricing teaser cream sur navy) */
  --color-light:        #fdfaf5;
  --color-light-soft:   #f5efe2;

  /* Bordures : translucides, gardent la profondeur du fond */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-strong:rgba(255, 255, 255, 0.18);

  /* États */
  --color-success:      #4cb685;
  --color-warning:      #e0a93f;
  --color-danger:       #d96560;

  /* ===== Typographie ===== */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle modulaire mobile-first (rebasée plus haut sur desktop) */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  2.75rem;    /* 44 */
  --fs-5xl:  3.5rem;     /* 56 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.04em;
  --tracking-wide: 0.06em;

  /* ===== Espacement (échelle 4px) ===== */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-pad: 1.25rem;     /* 20px sur mobile */

  /* ===== Radius ===== */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 999px;

  /* ===== Ombres ===== */
  /* Adaptées au dark : noir profond pour l'élévation, plus visible sur navy */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);

  /* ===== Transitions ===== */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ===== Z-index ===== */
  --z-header:   50;
  --z-drawer:   90;
  --z-modal:    100;
}

/* ===== Tablette ===== */
@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.25rem;
  }
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  :root {
    --fs-4xl: 4rem;
    --fs-5xl: 5rem;
  }
}