/* ==========================================================================
   Variables du design : palette, typographie, grille, espacements.
   Modifier ces valeurs suffit à faire évoluer l'ensemble du site.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette ---------------------------------------------------------------
     Contrastes mesurés sur --paper : ink 16.5:1, ink-2 8.3:1, ink-3 5.3:1,
     accent-ink 5.9:1, success 5.8:1, warning 5.7:1, error 6.9:1.
     --accent (4.4:1) est réservé aux grands éléments et aux filets. */
  --paper: #f4f2ed;          /* fond principal, blanc cassé */
  --paper-2: #e8e5de;        /* surfaces secondaires (exemples, survols) */
  --sheet: #fbfaf7;          /* fond des interactions */
  --ink: #141414;            /* texte principal */
  --ink-2: #4a4740;          /* texte secondaire */
  --ink-3: #625e56;          /* métadonnées */
  --rule: #c9c4ba;           /* filets discrets */
  --rule-strong: var(--ink); /* filets structurants */

  --accent: #d2321e;         /* unique couleur d'accent (rouge vermillon) */
  --accent-ink: #b3260f;     /* accent pour petits textes */

  --success: #1d6b3f;
  --success-bg: #e2ece3;
  --warning: #8a5300;
  --warning-bg: #f3e7cf;
  --error: #a3123f;
  --error-bg: #f5e1e6;

  --focus: var(--accent-ink);

  /* Typographie ---------------------------------------------------------- */
  --font-text: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;

  --fs-xs: 0.8125rem;    /* 13px : libellés en capitales */
  --fs-sm: 0.9375rem;    /* 15px : notes, légendes */
  --fs-base: 1.0625rem;  /* 17px sur mobile, 18px au-delà de 720px */
  --fs-code: 0.9375rem;
  --fs-md: 1.25rem;      /* chapeau, questions */
  --fs-lg: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-xl: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --fs-display: clamp(2.75rem, 1.2rem + 6.4vw, 7rem);
  --fs-numeral: clamp(4rem, 2rem + 8vw, 10rem);

  --lh-tight: 0.95;
  --lh-heading: 1.12;
  --lh-text: 1.6;
  --measure: 66ch;       /* largeur de lecture confortable */

  /* Espacements (base 4px) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Grille ---------------------------------------------------------------- */
  --page-max: 90rem;                       /* 1440px */
  --gutter: clamp(1rem, 4.5vw, 3.5rem);    /* marge extérieure */
  --gap: clamp(1rem, 2vw, 1.5rem);         /* gouttière entre colonnes */
  --columns: 12;

  --border: 1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);
}

@media (min-width: 45em) {
  :root {
    --fs-base: 1.125rem;
  }
}