/* ===========================================================
   TOKENS.CSS — Sources de vérité de la charte PAGE
   Toutes les variables design (couleurs, typo, espaces).
   Ne rien styler ici, uniquement des --variables.
   =========================================================== */

:root {
  /* ============= COULEURS (charte PAGE officielle) ============= */
  --bleu-ciel:    #d6e2ef;          /* charte cliente */
  --bleu-ciel-2:  #c4d3e5;          /* variante un peu plus saturée pour accents */
  --bleu-jeans:   #8ba4b0;          /* charte cliente */
  --bleu-nuit:    #3d4d5c;          /* assombri pour CTA, accents forts */
  --rose-peche:   #f8e6df;          /* charte cliente */
  --rose-peche-2: #ecc8b6;          /* variante pour accents */
  --vert-sauge:   #b9c8a9;          /* charte cliente */
  --creme:        #faf6f1;
  --creme-2:      #f3ecdf;
  --creme-3:      #ebe2d2;
  --encre:        #1f1f1f;
  --encre-soft:   #2a2a2a;
  --gris-doux:    #5a5a5a;
  --gris-fin:     #8a8a8a;
  --blanc:        #ffffff;

  /* Sémantique */
  --bg-default:   var(--blanc);
  --bg-soft:      var(--creme);
  --bg-soft-2:    var(--creme-2);
  --bg-accent:    var(--bleu-ciel);
  --bg-accent-2:  var(--bleu-ciel-2);
  --bg-deep:      var(--encre);
  --text-default: var(--encre);
  --text-strong:  var(--encre);
  --text-soft:    var(--gris-doux);
  --text-faint:   var(--gris-fin);
  --text-accent:  var(--bleu-jeans);
  --text-deep:    var(--bleu-nuit);
  --border-soft:  var(--creme-3);
  --border-line:  rgba(31, 31, 31, 0.12);
  --border-strong: var(--encre);

  /* ============= TYPOGRAPHIE ============= */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:  'Belleza', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  /* Échelle typographique (clamp = mobile → desktop)
     Body 17px conservé (jugé bien). Titres XL réduits ~15-20% suite au retour V2. */
  --fs-mega:    clamp(64px, 12vw, 160px);    /* Chiffres XXL type "01" magazine */
  --fs-display: clamp(46px, 7.6vw, 104px);   /* Hero h1 */
  --fs-manifest: clamp(38px, 5.2vw, 80px);   /* Titres "manifesto" pleine largeur (harmonisé) */
  --fs-h1:      clamp(36px, 5vw, 68px);
  --fs-h2:      clamp(30px, 4vw, 54px);
  --fs-h3:      clamp(24px, 3vw, 40px);
  --fs-h4:      clamp(21px, 2.3vw, 28px);
  --fs-quote:   clamp(26px, 3.2vw, 44px);
  --fs-body-xl: 21px;
  --fs-body-l:  19px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-micro:   12px;
  --fs-nano:    11px;

  /* Hauteurs de ligne */
  --lh-tight:   1.02;
  --lh-snug:    1.18;
  --lh-normal:  1.6;
  --lh-loose:   1.8;

  /* Lettrage */
  --ls-tighter: -0.02em;
  --ls-tight:   -0.005em;
  --ls-normal:  0;
  --ls-mid:     0.08em;
  --ls-wide:    0.18em;
  --ls-xwide:   0.32em;
  --ls-huge:    0.5em;

  /* ============= ESPACEMENT ============= */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  140px;
  --space-4xl:  200px;

  /* Padding section vertical — harmonisé.
     V3 : valeurs réduites ~30% pour un rythme vertical plus serré
     tout en conservant la respiration éditoriale.
     Mobile : encore plus serré (voir @media ≤700px en bas du fichier). */
  --section-py:        clamp(64px, 7.5vw, 112px);
  --section-py-large:  clamp(88px, 10vw, 140px);
  --section-py-small:  clamp(48px, 6vw, 88px);

  /* ============= LAYOUT ============= */
  --container-max: 1440px;
  --container-wide: 1640px;
  --container-px:  clamp(20px, 6vw, 80px);

  /* Hauteur du header (réservée pour le contenu sticky) */
  --header-h: 78px;

  /* ============= BREAKPOINTS (références) =============
     mobile  : ≤ 640px
     tablet  : ≤ 900px
     desktop : ≥ 1200px
  */

  /* ============= RADII ============= */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* ============= OMBRES ============= */
  --shadow-soft:    0 30px 70px -35px rgba(0, 0, 0, 0.30);
  --shadow-card:    0 10px 30px -15px rgba(0, 0, 0, 0.15);
  --shadow-deep:    0 50px 100px -40px rgba(0, 0, 0, 0.40);
  --shadow-hover:   0 30px 60px -20px rgba(109, 130, 148, 0.50);
  --shadow-overlay: 0 2px 30px rgba(0, 0, 0, 0.4);

  /* ============= TRANSITIONS ============= */
  --t-fast:   180ms ease;
  --t-base:   320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow:   620ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ============= Z-INDEX ============= */
  --z-base:    1;
  --z-content: 10;
  --z-header:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
}

/* ============= MOBILE OVERRIDES ============= */
/* Sur mobile (≤900px), on resserre les espacements pour éviter les vides excessifs.
   Les tokens sont overridés dans :root pour que tout le site bénéficie automatiquement. */
@media (max-width: 900px) {
  :root {
    /* Paddings verticaux des sections — divisés par ~1.7 vs desktop */
    --section-py:        56px;
    --section-py-large:  72px;
    --section-py-small:  40px;

    /* Échelle d'espacement réduite pour les gros gaps */
    --space-2xl: 56px;
    --space-3xl: 80px;
    --space-4xl: 120px;

    /* Le padding horizontal du container reste raisonnable */
    --container-px: 20px;
  }
}
/* En très petit mobile (≤480px), on serre encore un peu plus */
@media (max-width: 480px) {
  :root {
    --section-py:        44px;
    --section-py-large:  60px;
    --section-py-small:  32px;
    --space-2xl: 40px;
    --space-3xl: 60px;
  }
}