:root {

  /* ── Couleurs ─────────────────────────────────── */

  --bg:          #f5f1e8;
  --bg-alt:      #ede8dc;
  --bg-raised:   #ede8dc;
  --bg-dark:     #181916;
  --bg-code:     #181916;

  --ink-1:       #1a1208;
  --ink-2:       #373520;
  --ink-3:       #5c5640;
  --ink-4:       #7a7060;

  --accent:      #1a1208;
  --accent-dark: #373520;
  --cta:         #0071E3;
  --cta-dark:    #0058b0;

  --border:      #e0d4bc;
  --border-mid:  #c8bea8;

  /* ── Neutralisation des vars du thème ────────── */
  --on-surface:          #1a1208;
  --on-surface-variant:  #373520;
  --primary:             #1a1208;
  --on-primary:          #ffffff;
  --surface:             #f5f1e8;
  --ink:                 #1a1208;

  /* ── Typographie ──────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Commit Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* Échelle Apple HIG — base 17px */
  --text-xs:     0.6875rem;  /* 11px  — captions, tags */
  --text-sm:     0.8125rem;  /* 13px  — footnotes, dates */
  --text-base:   1.0625rem;  /* 17px  — body */
  --text-md:     1.25rem;    /* 20px  — title 3 */
  --text-lg:     1.375rem;   /* 22px  — title 2 */
  --text-xl:     1.75rem;    /* 28px  — title 1 */
  --text-2xl:    2.125rem;   /* 34px  — large title */
  --text-3xl:    3rem;       /* 48px  — display */

  /* Interlignage Apple */
  --leading-tight:   1.2;
  --leading-snug:    1.294; /* 22/17 — body Apple exact */
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.9;

  /* Interlettrage Apple — négatif sur les grands, légèrement positif sous 13px */
  --tracking-display: -0.031em; /* h1 34px → -1.05px */
  --tracking-title1:  -0.029em; /* h2 28px → -0.80px */
  --tracking-title2:  -0.032em; /* h3 22px → -0.70px */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-caption:  0.012em; /* sous 13px */
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* ── Espacements — échelle 4px ────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Layout ───────────────────────────────────── */
  --width-content:  900px;
  --width-reading:  68ch;
  --width-narrow:   52ch;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 100px;

  /* ── Transitions ──────────────────────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);     /* spring rapide — hover */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* spring avec overshoot — entrées */
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);   /* Material decelerate — page load */
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.0, 1.0); /* HIG standard — transitions UI */
  --t-fast:   120ms;
  --t-mid:    220ms;
  --t-slow:   400ms;
  --t-enter:  500ms;
}