/* ============================================================
   Double Impact — Design tokens
   DA extraite du site existant (cf. brief/brand/brand-da.md) :
   - Display : Quadrant (sérif éditoriale)  → titres, citations
   - Texte   : Open Sauce Two (grotesque)   → corps
   - Palette : monochrome chaude (encre / papier / taupe)
   Le contraste sérif × grotesque = traduction typo de
   « dialoguer les contraires ».
   ============================================================ */
:root {
  /* — Couleurs (valeurs réelles du site existant) — */
  --ink:        #0c0c0b;   /* encre — fonds sombres, texte */
  --paper:      #f8f7f4;   /* papier — off-white chaud */
  --taupe:      #ccc9c2;   /* taupe — traits, texte atténué */
  --ink-80:     rgba(12, 12, 11, 0.80);
  --ink-55:     rgba(12, 12, 11, 0.55);
  --paper-70:   rgba(248, 247, 244, 0.70);
  --paper-45:   rgba(248, 247, 244, 0.45);
  --hairline:   rgba(12, 12, 11, 0.14);  /* filet sur fond clair */
  --hairline-i: rgba(248, 247, 244, 0.18);/* filet sur fond sombre */

  /* — Typographie — */
  --font-display: "Quadrant", Georgia, "Times New Roman", serif;
  --font-text:    "Open Sauce Two", Helvetica, Arial, sans-serif;

  /* Échelle fluide (mobile-first, clamp) */
  --fs-xs:   0.75rem;                              /* 12px — sur-titres / labels */
  --fs-sm:   0.875rem;                             /* 14px */
  --fs-base: 1rem;                                 /* 16px */
  --fs-lg:   1.125rem;                             /* 18px */
  --fs-xl:   clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --fs-3xl:  clamp(2.4rem, 1.4rem + 4.8vw, 4.5rem);
  --fs-hero: clamp(2.9rem, 1.6rem + 6.4vw, 6rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --tracking-label: 0.22em;  /* sur-titres en capitales espacées */
  --tracking-tight: -0.01em;

  /* — Espacement (rythme éditorial) — */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  /* — Layout — */
  --maxw:        72rem;   /* largeur max contenu large */
  --maxw-read:   38rem;   /* largeur de lecture confortable */
  --gutter:      clamp(1.25rem, 5vw, 3rem);
  --radius:      0;       /* DA : pas d'arrondi, registre éditorial net */
  --header-h:    4.25rem;

  /* — Mouvement — */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  240ms;
  --dur:       560ms;
  --dur-slow:  900ms;
}