/* =============================================================
   tokens.css — Private Safari Guides
   Design tokens : palette, typo, espace, transitions.
   Aucune valeur hard-codée en dehors d'ici.
   ============================================================= */

:root {
  /* --- Palette (5 couleurs strictes, aucune autre autorisée) --- */
  --ink:        #1A1814;
  --paper:      #F4EFE6;
  --paper-deep: #E8E0D2;
  --ochre:      #B8743A;
  --moss:       #4A5D3A;

  /* Variantes calculées (opacités d'état, jamais de nouvelles teintes) */
  --ink-90: rgba(26, 24, 20, 0.90);
  --ink-70: rgba(26, 24, 20, 0.70);
  --ink-60: rgba(26, 24, 20, 0.60);
  --ink-40: rgba(26, 24, 20, 0.40);
  --ink-20: rgba(26, 24, 20, 0.20);
  --ink-10: rgba(26, 24, 20, 0.10);
  --ink-05: rgba(26, 24, 20, 0.05);

  --paper-80: rgba(244, 239, 230, 0.80);
  --paper-60: rgba(244, 239, 230, 0.60);

  /* --- Familles typographiques --- */
  --ff-display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --ff-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Échelle typographique fluide --- */
  --fs-display: clamp(2.5rem, 4vw + 1rem, 6rem);     /* 40 → 96px - manifesto/H1 hero */
  --fs-h1:      clamp(2.25rem, 3.2vw + 1rem, 4.5rem); /* 36 → 72px */
  --fs-h2:      clamp(1.75rem, 2vw + 1rem, 3rem);     /* 28 → 48px */
  --fs-h3:      clamp(1.25rem, 0.8vw + 1rem, 1.625rem); /* 20 → 26px */
  --fs-h4:      clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --fs-body:    clamp(1rem, 0.25vw + 0.95rem, 1.1875rem); /* 16 → 19px */
  --fs-body-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.3125rem); /* 17 → 21px (lead) */
  --fs-small:   0.875rem;
  --fs-meta:    0.75rem;     /* 12px - small caps mono */
  --fs-tiny:    0.6875rem;   /* 11px - section numbers */

  /* --- Line-heights --- */
  --lh-tight:   1.05;   /* hero displays */
  --lh-snug:    1.15;   /* h1/h2 */
  --lh-normal:  1.4;    /* h3/h4 */
  --lh-body:    1.65;   /* body */
  --lh-relaxed: 1.75;   /* long-form lead */

  /* --- Letter-spacing --- */
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-loose:   0.04em;
  --ls-caps:    0.1em;   /* small caps mono */
  --ls-caps-lg: 0.16em;

  /* --- Poids (la plupart restent regular — voir règles design) --- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-italic-style: italic;

  /* --- Échelle d'espacement (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   96px;
  --space-9:   128px;
  --space-10:  192px;

  /* Rythme vertical éditorial entre blocs */
  --rhythm-section: clamp(64px, 8vw, 128px);
  --rhythm-block:   clamp(32px, 4vw, 64px);
  --rhythm-para:    clamp(16px, 1.5vw, 24px);

  /* --- Containers / max-widths --- */
  --max-page:       1280px;
  --max-content:    1080px;
  --max-prose:      72ch;     /* corps long-form */
  --max-prose-narrow: 60ch;   /* manifeste, citations */
  --max-measure:    65ch;

  /* Marges latérales (8-10vw desktop, 24px min mobile) */
  --pad-x:          clamp(24px, 8vw, 160px);
  --pad-x-narrow:   clamp(24px, 4vw, 64px);

  /* --- Border / radius (jamais > 2px) --- */
  --radius-none: 0;
  --radius-xs:   2px;
  --bw:          1px;
  --bw-thick:    2px;

  /* --- Transitions (cubic-bezier d'inspiration éditoriale) --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);

  --t-fast:   180ms;
  --t-base:   300ms;
  --t-slow:   600ms;
  --t-photo:  800ms;

  /* --- Z-index scale --- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 800;
  --z-drawer:  900;
  --z-bubble:  950;
  --z-modal:   1000;

  /* --- Selection / focus --- */
  --selection-bg: var(--ink);
  --selection-fg: var(--paper);
  --focus-ring:   var(--ink);
  --focus-offset: 2px;
  --focus-width:  2px;

  /* --- Grain overlay (utilisé sur photos) --- */
  --grain-opacity: 0.14;
}

/* Pas de dark mode V1 — décision produit (cf BRIEF-FINAL §). */