/* ===========================================================
   TOKENS.CSS — Charte V comme Samedi
   Source de vérité : brief DA de Séverine Benveniste.
   Aucun style ici, uniquement des variables.
   =========================================================== */

:root {
  /* ============= COULEURS (charte cliente, valeurs exactes) ============= */
  --blanc-casse:  #FAF8F5;   /* fond principal */
  --lin:          #EFE8DF;   /* blocs */
  --gris-chaud:   #6E6A66;   /* texte secondaire */
  --noir-doux:    #2F2B28;   /* texte principal */
  --beige-dore:   #D9C6AA;   /* accents, par petites touches uniquement */
  --blanc:        #FFFFFF;

  /* Déclinaisons utilitaires (dérivées, jamais de nouvelle teinte) */
  --lin-clair:    #F5F0E9;
  --beige-pale:   rgba(217, 198, 170, 0.28);
  --filet:        rgba(47, 43, 40, 0.12);
  --filet-fin:    rgba(47, 43, 40, 0.07);

  /* Sémantique */
  --bg:            var(--blanc-casse);
  --bg-bloc:       var(--lin);
  --text:          var(--noir-doux);
  --text-soft:     var(--gris-chaud);
  --accent:        var(--beige-dore);
  --border:        var(--filet);

  /* ============= TYPOGRAPHIE ============= */
  /* Titres : serif élégante — « donner l'impression d'entrer dans un livre » */
  --font-serif:  'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  /* Texte : sans serif très discrète, très lisible */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  /* Manuscrite : uniquement par petites touches (citations, signature) */
  --font-script: 'Parisienne', 'Brush Script MT', cursive;

  /* Échelle — la page d'attente vit sur peu de niveaux, très espacés */
  /* Plafonné à 76px : au-delà, « Un nouveau chapitre » ne tient plus sur une
     ligne à côté de la photo, et le titre se casse en trois. */
  --fs-display: clamp(38px, 6.4vw, 76px);
  --fs-h2:      clamp(24px, 3.2vw, 38px);
  --fs-h3:      clamp(19px, 2vw, 24px);
  --fs-lead:    clamp(17px, 1.5vw, 21px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;
  --fs-script:  clamp(26px, 3vw, 38px);

  --lh-tight:   1.08;
  --lh-snug:    1.3;
  --lh-normal:  1.65;
  --lh-loose:   1.85;

  /* Lettrage — les petites capitales espacées font une grande partie
     de l'élégance éditoriale de la marque */
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.16em;
  --ls-xwide:   0.28em;

  /* ============= ESPACEMENT ============= */
  /* « Je veux beaucoup d'espace » → échelle généreuse assumée */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  140px;

  --section-py: clamp(56px, 9vw, 120px);

  /* ============= LAYOUT ============= */
  --container-max: 1180px;
  --container-narrow: 720px;
  --container-px: clamp(24px, 6vw, 72px);

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

  --shadow-soft:  0 24px 60px -32px rgba(47, 43, 40, 0.22);
  --shadow-panel: 0 40px 120px -40px rgba(47, 43, 40, 0.35);

  /* ============= TRANSITIONS ============= */
  /* « Je veux que les visiteurs aient envie de ralentir » → durées longues */
  --t-fast: 200ms ease;
  --t-base: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ============= Z-INDEX ============= */
  --z-grain:   1;
  --z-content: 10;
  --z-overlay: 900;
  --z-panel:   1000;
}

@media (max-width: 700px) {
  :root {
    --section-py: 48px;
    --space-2xl:  64px;
    --space-3xl:  88px;
  }
}