/* ============================================================
   HUMANIMAL PHOTOGRAPHIE — DESIGN TOKENS
   Direction visuelle • à figer avant production
   ------------------------------------------------------------
   Palette affinée à partir de la base fournie.
   Couleur de marque conservée (brun taupe du logo) ; ajout de
   nuances de surface / lignes / texte adouci pour un rendu
   éditorial, lumineux et intemporel.
   ============================================================ */

:root {
  /* ---------- COULEURS · base ---------- */
  --cream:        #F6F0E7;   /* fond principal — crème légèrement réchauffée */
  --surface:      #FBF8F2;   /* cartes / blocs clairs (blanc chaud)         */
  --paper:        #FFFFFF;   /* blanc pur, usage ponctuel                   */
  --ink:          #2B2724;   /* texte principal — encre chaude              */
  --ink-soft:     #6E655C;   /* texte secondaire / légendes                 */
  --ink-faint:    #756B61;   /* méta, placeholders, hints (WCAG AA : 4.6:1) */

  /* ---------- COULEURS · marque (logo) ---------- */
  --brand:        #8C6F5B;   /* brun taupe — titres, accents, CTA           */
  --brand-dark:   #6F5746;   /* survol / pressed                            */
  --brand-deep:   #4A3A2E;   /* fonds sombres (footer, bandeaux)            */
  --brand-tint:   #EBE2D8;   /* wash très clair pour fonds de section       */
  --brand-tint-2: #E1D5C7;   /* second wash, séparateurs doux               */

  /* ---------- COULEURS · accent secondaire ---------- */
  --sage:         #9CA98C;   /* sauge — détails, filets, états              */
  --sage-dark:    #7E8B6E;   /* sauge soutenue (texte sur clair)            */
  --sage-tint:    #E2E6DA;   /* wash sauge                                  */

  /* ---------- COULEURS · lignes & ombres ---------- */
  --line:         #E6DCCF;   /* filets, bordures de cartes                  */
  --line-strong:  #D8CBB9;
  --shadow-sm:    0 1px 2px rgba(43,39,36,.04), 0 2px 8px rgba(43,39,36,.05);
  --shadow-md:    0 6px 24px rgba(43,39,36,.08);
  --shadow-lg:    0 20px 60px rgba(43,39,36,.14);
  --shadow-img:   0 30px 70px -28px rgba(74,58,46,.45);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* échelle modulaire (clamp = fluide desktop→mobile) */
  --fs-hero:    clamp(3.4rem, 7vw, 7rem);     /* titres hero            */
  --fs-d1:      clamp(2.6rem, 5vw, 4.6rem);   /* titres de section      */
  --fs-d2:      clamp(2rem, 3.4vw, 3.1rem);   /* sous-titres            */
  --fs-h3:      clamp(1.4rem, 2vw, 1.85rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.35rem);/* chapô                  */
  --fs-body:    1.0625rem;                    /* 17px corps             */
  --fs-sm:      0.9375rem;                    /* 15px                   */
  --fs-eyebrow: 0.8125rem;                    /* 13px sur-titre         */

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

  --tracking-eyebrow: 0.28em;
  --tracking-wide:    0.12em;
  --tracking-display: 0.005em;

  /* graisses */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;

  /* ---------- ESPACEMENTS (base 4px) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* rythme vertical des sections */
  --section-y:  clamp(4.5rem, 9vw, 9rem);
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* ---------- STRUCTURE ---------- */
  --maxw:        1280px;   /* conteneur large            */
  --maxw-text:   720px;    /* colonne de lecture          */
  --maxw-narrow: 980px;

  /* rayons — discrets, éditoriaux */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* transitions */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .25s var(--ease);
  --t:      .45s var(--ease);
  --t-slow: .9s  var(--ease);
}