/* ==========================================================================
   ID Claire's — Design tokens
   Source de vérité CSS (miroir de theme.json). Voir docs/02-design-system.md
   ========================================================================== */
:root {
  /* --- Couleurs --- */
  --cream:      #F6F2E9;
  --cream-2:    #FBF9F3;
  --ink:        #1C1B18;
  --ink-soft:   #4A4842;
  --teal-900:   #0E3B38;
  --teal-700:   #124C48;
  --teal-500:   #2E6B65;
  --teal-100:   #DCE7E4;
  --gold:       #BE9E5B;
  --gold-deep:  #9E7F3F;
  --line:       #E3DCCB;
  --line-dark:  rgba(246, 242, 233, 0.16);

  /* rôles sémantiques */
  --bg:            var(--cream);
  --surface:       var(--cream-2);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --heading:       var(--teal-700);
  --accent:        var(--gold);
  --accent-strong: var(--gold-deep);

  /* --- Typographie --- */
  --font-display: "Fraunces", "Fraunces Placeholder", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", "Hanken Grotesk Placeholder", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem);
  --fs-lead:    clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.8125rem;

  --lh-tight: 1.1;
  --lh-snug:  1.22;
  --lh-body:  1.7;
  --ls-caps:  0.14em;
  --measure:  68ch;

  /* --- Espacements --- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);

  --container:      1200px;
  --container-wide: 1440px;
  --container-text: 72ch;
  --gutter:         clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* --- Rayons --- */
  --r-s:    8px;
  --r-m:    14px;
  --r-l:    22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* --- Ombres (chaudes, discrètes) --- */
  --shadow-s: 0 1px 2px rgba(28,27,24,.04), 0 2px 8px rgba(28,27,24,.05);
  --shadow-m: 0 10px 30px -12px rgba(28,27,24,.18);
  --shadow-l: 0 30px 60px -20px rgba(14,59,56,.28);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur:      0.5s;
  --dur-slow: 0.8s;

  --header-h: 76px;
}