/* ==========================================================================
   Tokens — la source de vérité du design.
   Changer une valeur ici la change partout sur le site.
   ========================================================================== */

:root {
  /* --- Couleurs : fonds ------------------------------------------------- */
  --color-bg: #04150b;          /* fond principal de la page               */
  --color-bg-alt: #082010;      /* sections alternées (histoire, offres)   */
  --color-bg-deep: #071c0f;     /* section témoignages                     */
  --color-surface: #0a2414;     /* cartes posées sur le fond               */

  /* --- Couleurs : accent ------------------------------------------------ */
  --color-accent: #2ee55b;      /* vert de marque                          */
  --color-accent-hover: #7df09a;
  --color-on-accent: #04150b;   /* texte posé sur l'accent                 */

  /* --- Couleurs : texte ------------------------------------------------- */
  --color-text: #f2f5f1;        /* texte principal                         */
  --color-text-soft: #b4c6ba;   /* paragraphes longs                       */
  --color-text-muted: #a8bbae;  /* texte secondaire                        */
  --color-text-dim: #8aa294;    /* légendes, mentions légales              */
  --color-text-faint: #7e9886;  /* placeholders                            */

  /* --- Couleurs : bordures ---------------------------------------------- */
  --color-border: #1d3a27;        /* bordure de carte                      */
  --color-border-soft: #173322;   /* séparateurs de page                   */
  --color-border-strong: #2b4a35; /* contours interactifs                  */

  /* --- Ombres ----------------------------------------------------------- */
  --shadow-card: 0 30px 60px rgba(0, 0, 0, 0.45);
  --shadow-badge: 0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-cover: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-featured: 0 30px 70px rgba(46, 229, 91, 0.18);
  --shadow-sticky: 0 -10px 30px rgba(0, 0, 0, 0.4);

  /* --- Rayons ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* --- Typographie ------------------------------------------------------ */
  --font-sans: Poppins, system-ui, sans-serif;

  --fs-h1: 72px;
  --lh-h1: 1.02;
  --ls-h1: -2.5px;

  --fs-h2: 48px;
  --lh-h2: 1.06;
  --ls-h2: -1.5px;

  --fs-h3: 30px;          /* titres de sous-section (« Mes chiffres »)     */
  --ls-h3: -1px;

  --fs-stat: 56px;        /* grands chiffres des cartes statistiques       */
  --ls-stat: -2.5px;

  --fs-eyebrow: 20px;     /* « 01 — Ce qu'Upwork a changé… »               */
  --fs-lead: 22px;        /* accroche sous le H1                           */
  --fs-body: 18px;
  --fs-base: 16px;
  --fs-sm: 15px;
  --fs-xs: 14px;
  --fs-2xs: 13px;
  --fs-brand: 21px;       /* « Judeferry SOSSOU » dans l'en-tête           */
  --fs-faq: 21px;

  /* --- Mise en page ----------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 860px;
  --container-px: 28px;   /* marge latérale de toutes les sections         */

  --section-py: 128px;    /* respiration verticale d'une grande section    */
  --hero-pt: 104px;
  --hero-pb: 96px;

  --gap-xl: 64px;         /* écart entre les deux colonnes d'une section   */
}

/* Un seul point de rupture : en dessous, on réduit l'échelle typographique
   et les espacements. Les composants n'ont rien à redéfinir. */
@media (max-width: 760px) {
  :root {
    --fs-h1: 40px;
    --lh-h1: 1.06;
    --ls-h1: -1.2px;

    --fs-h2: 31px;
    --ls-h2: -0.8px;

    --fs-stat: 30px;
    --ls-stat: -1px;

    --fs-eyebrow: 16px;
    --fs-lead: 18px;
    --fs-brand: 17px;
    --fs-faq: 17px;

    --container-px: 20px;
    --section-py: 64px;
    --hero-pt: 36px;
    --hero-pb: 56px;

    --gap-xl: 32px;
  }
}