/* ==========================================================================
   TOKENS — Source unique de vérité pour couleurs, typographie, espacements.
   C'EST ICI QUE L'ON MODIFIE L'IDENTITÉ VISUELLE DU SITE.
   Palette strictement monochrome : noir, blanc, gris purs (aucune teinte).
   ========================================================================== */

:root {
  /* --- Couleurs (gris purs uniquement : R=G=B) --------------------------- */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-gray-900: #0a0a0a; /* fonds noirs alternatifs */
  --c-gray-700: #3d3d3d;
  --c-gray-500: #767676; /* contraste 4.54:1 sur blanc — mini AA */
  --c-gray-300: #d4d4d4;
  --c-gray-200: #e5e5e5;
  --c-gray-100: #f4f4f4;

  /* --- Rôles sémantiques (utilisés dans style.css) ----------------------- */
  --bg: var(--c-white);
  --fg: var(--c-black);
  --fg-muted: var(--c-gray-500); /* textes secondaires sur blanc */
  --line: var(--c-gray-200);     /* filets/séparateurs sur blanc */

  /* Section inversée (fond noir) */
  --bg-inv: var(--c-black);
  --fg-inv: var(--c-white);
  --fg-inv-muted: #b0b0b0;       /* contraste 8.2:1 sur noir */
  --line-inv: #2a2a2a;

  /* --- Typographie ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  /* Échelle fluide (clamp : mobile → desktop) */
  --fs-display: clamp(2.75rem, 1.2rem + 7.2vw, 8rem);  /* H1 hero */
  --fs-h2: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem); /* chapô */
  --fs-body: 1rem;      /* 16px mini — évite le zoom auto iOS */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;  /* eyebrows / labels capitales */

  --lh-tight: 0.95;
  --lh-heading: 1.1;
  --lh-body: 1.65;

  --ls-display: -0.04em;  /* tracking serré sur les grands titres */
  --ls-heading: -0.02em;
  --ls-label: 0.22em;     /* tracking large sur les micro-labels */

  /* --- Espacements (rythme 4/8px) ---------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Respiration verticale des sections (beaucoup de blanc) */
  --section-y: clamp(4.5rem, 2rem + 9vw, 10rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1280px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --header-h: 72px;

  /* --- Bordures & rayons (esprit épuré : angles nets) -------------------- */
  --radius: 0px;
  --border-w: 1px;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Élévation (z-index) ----------------------------------------------- */
  --z-header: 100;
  --z-menu: 200;
}