/* =============================================================
   variables.css — Design tokens extraits du Figma "Maquette"
   Agence 30A — Site statique
   ============================================================= */

:root {

  /* ── Couleurs de marque ───────────────────────────────────── */
  --clr-primary:        #003F59;   /* Fond/Primaire texte, dark navy */
  --clr-secondary:      #0072A1;   /* Bleu moyen, bordures, accents */
  --clr-accent:         #F56260;   /* Coral/rouge, CTA */
  --clr-accent-dark:    #D94948;   /* Coral foncé, fin de gradient CTA */

  /* ── Fonds de section ─────────────────────────────────────── */
  --clr-bg-primary:     #DFF6FF;   /* Fond bleu ciel clair */
  --clr-bg-secondary:   #FAFEFF;   /* Fond blanc bleuté */
  --clr-bg-white:       #FFFFFF;
  --clr-bg-dark:        #003F59;   /* Hero, Agence, Footer */
  --clr-bg-hero:        #001929;   /* Fond hero le plus sombre */

  /* ── Texte ────────────────────────────────────────────────── */
  --clr-text-primary:   #003F59;
  --clr-text-secondary: #5B6265;
  --clr-text-light:     #F2FBFF;   /* Texte sur fond sombre */
  --clr-text-accent-bg: #FFEEED;   /* Texte sur fond accent */

  /* ── Bordures / séparateurs ───────────────────────────────── */
  --clr-border:         #C4C9CB;
  --clr-border-blue:    #0072A1;
  --clr-border-accent:  #F56260;

  /* ── Gradients ────────────────────────────────────────────── */
  --grad-accent:        linear-gradient(48deg, #F56260 6%, #DD5553 100%);
  --grad-primary:       linear-gradient(181deg, #025678 0%, #0087BF 87%);
  --grad-hero:          linear-gradient(180deg, #001929 0%, #003F59 100%);

  /* ── Espacements (baseMultiple: 4px) ─────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-15:  60px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-25:  100px;
  --sp-30:  120px;

  /* ── Typographies ─────────────────────────────────────────── */
  --font-display:  'Switzer', 'Inter', sans-serif;
  --font-heading:  'Space Grotesk', sans-serif;
  --font-body:     'Montserrat', sans-serif;
  --font-script:   'MonteCarlo', cursive;

  /* Tailles de police — Desktop */
  --fs-2xs:  10px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   20px;
  --fs-lg:   28px;
  --fs-xl:   48px;
  --fs-2xl:  62px;

  /* Graisses */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Interlignages */
  --lh-tight:   1.1;
  --lh-snug:    1.22;
  --lh-normal:  1.3;
  --lh-relaxed: 1.5;

  /* Letter-spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.01em;

  /* ── Border-radius ────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Ombres ───────────────────────────────────────────────── */
  --shadow-card: 0px 4px 21px rgba(0, 0, 0, 0.10);
  --shadow-nav:  0px 4px 24px rgba(0, 0, 0, 0.08);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition: 0.2s ease;

  /* ── Conteneur ────────────────────────────────────────────── */
  --container-max:     1040px;   /* 1280 - 2×120 */
  --container-px-mob:  var(--sp-5);   /* 20px */
  --container-px-tab:  var(--sp-10);  /* 40px */
  --container-px-desk: var(--sp-30);  /* 120px */

  /* ── Sections ─────────────────────────────────────────────── */
  --section-py-mob:   60px;
  --section-py-tab:   80px;
  --section-py-desk:  100px;
}