/* Facette — tokens (voir DESIGN_SYSTEM.md) */
:root {
  /* Couleurs relevées dans Figma */
  --orange: #ff5900;
  --orange-press: #e84f00;
  --cream: #fff0e8;
  --peach: #ffd9c5;
  --brown: #672d0d;
  --ink: #22140d;
  --purple: #912af1;
  --kraft: #c9a485;

  --ink-2: rgb(34 20 13 / 0.68);   /* texte secondaire sur crème */
  --ink-3: rgb(34 20 13 / 0.48);   /* texte discret sur crème */
  --line: rgb(34 20 13 / 0.1);
  --line-light: rgb(255 240 232 / 0.16);

  /* Typo — remplacer par "Citizen Grotesk" une fois la licence web achetée */
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-meta: 13px;
  --fs-body: 16px;
  --fs-body-l: clamp(18px, 1.4vw, 20px);
  --fs-h3: clamp(26px, 2.2vw, 32px);
  --fs-h2: clamp(40px, 4.6vw, 64px);
  --fs-h1: clamp(48px, 6.2vw, 88px);
  --fs-display: 22vw;

  /* Espacement (grille de 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-48: 192px;
  --gutter: 24px;
  --page: 24px;
  --max: 1440px;

  --r-ctl: 11px;
  --r-card: 15px;
  --r-logo: 33px;

  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 768px) { :root { --page: 48px; } }
@media (min-width: 1200px) { :root { --page: 64px; } }