/* === TOKENS.CSS — Fare Ouverte : sable solaire & terre cuite === */
:root {
  /* ── COULEURS — Bora Bora éditorial : blanc sable & lagon profond ── */
  --bg-page: #f8f4ec; /* blanc sable Bora Bora — solaire mais doux */
  --bg-elevated: #ffffff; /* blanc pur pour cards & emphases */
  --bg-soft: #ede6d5; /* sable plus dense pour zones secondaires */
  --bg-deep: #1f2933; /* bleu nuit profond — ciel constellé Pacifique */

  --text-primary: #1f2933; /* bleu nuit, moderne et lisible */
  --text-secondary: #4a5763;
  --text-tertiary: #5a636b; /* WCAG AA : 4.92:1 sur bg-soft, 5.58:1 sur sable, 6.12:1 sur blanc */
  --text-on-dark: #f8f4ec;

  --accent: #1b5e70; /* lagon profond — bleu canard sobre */
  --accent-hover: #144a59;
  --accent-soft: #d6e4e7;
  --or: #b89a56; /* or doux pour citations & ornements */
  --danger: #a33b26; /* sémantique alerte/menace (sites archéologiques en danger) */

  --border: #e2dac7; /* sable clair pour dividers */
  --border-strong: #bba98a;
  --border-soft: rgba(31, 41, 51, 0.08);

  /* ── TYPOGRAPHIE ── */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;

  --size-xl6: clamp(48px, 8vw, 100px);
  --size-xl5: clamp(38px, 5.5vw, 76px);
  --size-xl4: clamp(30px, 4vw, 54px);
  --size-xl3: clamp(24px, 3vw, 38px);
  --size-xl2: clamp(20px, 2.4vw, 28px);
  --size-xl: clamp(17px, 1.8vw, 21px);
  --size-lg: clamp(16px, 1.6vw, 18px);
  --size-base: 16px;
  --size-sm: 14px;
  --size-xs: 12px;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.65;
  --lh-loose: 1.8;

  /* ── ESPACEMENT ── */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;
  --s8: 160px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ── EFFETS ── */
  --radius-sm: 2px;
  --radius-md: 4px;

  --shadow-soft:
    0 1px 2px rgba(42, 30, 20, 0.04), 0 4px 16px rgba(42, 30, 20, 0.06);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;

  /* Texture papier subtile (grain) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.165 0 0 0 0 0.118 0 0 0 0 0.078 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Grain global subtil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
  opacity: 0.22;
  z-index: 1;
}

body > * {
  position: relative;
  z-index: 2;
}