/* ==========================================================================
   TOKENS — le seul fichier à toucher pour personnaliser couleurs, typo, rythme.
   Effet de simple exposition : ces valeurs se répètent partout à l'identique ;
   la cohérence crée la familiarité, la familiarité crée la confiance.
   ========================================================================== */

:root {
  /* ---- Couleurs ----
     Palette volontairement sobre : ivoire + encre.
     Effet Von Restorff : --accent est la SEULE couleur vive du site,
     réservée au CTA et aux détails qui guident l'œil. */
  --paper: #faf6f0;        /* fond principal, ivoire chaud */
  --paper-deep: #f1eadf;   /* fond des sections alternées */
  --ink: #1a1815;          /* texte principal, encre quasi noire */
  --ink-soft: #57514a;     /* texte secondaire (contraste AA sur ivoire) */
  --line: #ddd4c6;         /* filets, bordures */
  --accent: #b4380e;       /* vermillon — CTA uniquement (blanc dessus : 5.9:1, AA) */
  --accent-bright: #d64518;/* vermillon vif — décor (encre générative, soulignés) */
  --accent-ink: #8f2c0b;   /* vermillon foncé — état hover/actif */
  --accent-soft: #e8703f;  /* vermillon éclairci — petits textes sur fond sombre (AA) */

  /* Fond du hero immersif : encre chaude, plus profonde que --ink */
  --night: #14100c;
  --night-deep: #0b0906;

  /* ---- Typographies ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique fluide (mobile-first, clamp = pas de breakpoints typo) */
  --text-xs: 0.8125rem;                             /* 13px — tags, mentions */
  --text-sm: 0.9375rem;                             /* 15px — texte secondaire */
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);   /* corps */
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);    /* ledes */
  --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);    /* h3 */
  --text-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);   /* h2 */
  --text-hero: clamp(2.375rem, 1.5rem + 5vw, 4.75rem);   /* h1 */
  --text-num: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);      /* gros chiffres */

  --leading-tight: 1.08;
  --leading-normal: 1.65;

  /* ---- Espacements (échelle régulière : rythme = fluence cognitive) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: clamp(4.5rem, 3rem + 6vw, 8rem);  /* respiration entre sections */

  /* ---- Mise en page ---- */
  --container-max: 68rem;      /* 1088px */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Détails ---- */
  --radius: 4px;               /* coins à peine adoucis : esprit imprimé, pas "app" */
  --shadow-card: 0 1px 2px rgba(26, 24, 21, 0.06), 0 12px 32px -16px rgba(26, 24, 21, 0.18);

  /* ---- Mouvement (attention : subtil et < 400 ms, jamais gratuit) ---- */
  --motion-fast: 160ms;
  --motion-reveal: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}