/* ============================================================
   FDTS — Design Tokens
   Tampon d'atelier · v1.0 · avril 2026
   ============================================================ */

:root {
  /* ---------- Couleurs ---------- */
  --kraft:   #EBE4D6;  /* Fond principal — 60%                  */
  --kraft-2: #DED4BF;  /* Kraft ombré                           */
  --paper:   #F5F1E6;  /* Fond web secondaire                   */
  --ink:     #312F2C;  /* « Béton » — charpente / texte — 20%   */
  --ink-2:   #413E3A;  /* Ink plus clair                        */
  --pencil:  #5A5144;  /* Texte secondaire, légendes            */
  --red:     #C43D1C;  /* « Rouge atelier » — ponctuation — 10% */
  --red-text:#A83318;  /* Rouge accessible pour les petits textes */
  --oak:     #7A5A30;  /* « Chêne » — rappel matière — 10%      */

  /* ---------- Typographies ---------- */
  --font-body:    'Kalam', cursive;
  --font-display: 'Archivo Black', sans-serif;
  --font-sans:    'Archivo', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ---------- Échelle d'espacement (base 4) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-18: 72px;
  --s-24: 96px;

  /* ---------- Transitions ---------- */
  --t-fast:   120ms ease-out;
  --t-normal: 150ms ease-out;
  --t-slow:   260ms cubic-bezier(.2, .8, .2, 1);

  /* ---------- Élévation (parcimonieux) ---------- */
  --shadow-cta: 0 4px 12px rgba(49, 47, 44, 0.15);

  /* ---------- Layout ---------- */
  --max-w: 1200px;
  --bp-tablet: 900px;
  --bp-mobile: 640px;
}

/* ---------- Reset minimal ---------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; background: var(--kraft); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Sélection ---------- */
::selection { background: var(--red); color: var(--kraft); }