/* ============================================================
   TOKENS — Killian Alaari
   Couleur de marque réelle : #1f2a30 (encre) + blanc (négatif)
   ============================================================ */
:root {
  /* Couleurs */
  --ink: #1f2a30;
  --white: #ffffff;
  --paper: #f4f1ec;
  --night: #13191d;
  --sky: #a9c3d1;
  --blush: #e7c9c2;
  --error: #b4423a;

  --ink-80: rgba(31, 42, 48, .80);
  --ink-60: rgba(31, 42, 48, .60);
  --ink-30: rgba(31, 42, 48, .30);
  --white-80: rgba(255, 255, 255, .80);
  --white-60: rgba(255, 255, 255, .60);
  --white-20: rgba(255, 255, 255, .20);
  --overlay: rgba(19, 25, 29, .35);

  /* Couleurs "thème" courant — basculées par le système négatif (JS/section) */
  --fg: var(--ink);
  --bg: var(--paper);
  --line: var(--ink-30);

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

  --fs-display: clamp(2.75rem, 8vw, 7rem);
  --fs-h1: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  --tracking-label: .14em;

  /* Espacement (base 8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --container: min(92vw, 1320px);
  --container-narrow: min(92vw, 880px);
  --edge: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .25s;
  --dur: .5s;
  --dur-slow: .85s;

  /* Empilement (du bas vers le haut) :
     rail < overlay nav / modale < header (AA toujours cliquable pour fermer) < loader (couvre tout au chargement). */
  --z-rail: 800;
  --z-modal: 1001; /* .nav-overlay + .modal commande */
  --z-nav: 1002;   /* .site-header : l'AA reste au-dessus de l'overlay → ouvre ET ferme */
  --z-loader: 1100;
}

/* Section sombre : inverse les variables de thème */
[data-theme="dark"] {
  --fg: var(--white);
  --bg: var(--night);
  --line: var(--white-20);
}
[data-theme="light"] {
  --fg: var(--ink);
  --bg: var(--paper);
  --line: var(--ink-30);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .001s; --dur: .001s; --dur-slow: .001s; }
}