/* HÖUL — Design tokens */
:root {
  /* Couleurs */
  --noir: #001219;
  --blanc: #f7feff;
  --rouge: #eb001c;
  --jaune: #fecc16;
  --bleu: #00b9c6;
  --contour: #000b0f;
  --rouge-fonce: #c20018;
  --bleu-fonce: #00949e;

  /* Accents par gamme */
  --c-cola: var(--rouge);
  --c-zero: #1a1f24;
  --c-tea: var(--jaune);
  --c-limo: var(--bleu);

  /* Typo */
  --f-display: "Medula One", "Oswald", sans-serif;     /* wordmarks, gros titres */
  --f-heading: "Anton", "Oswald", sans-serif;           /* titres de section */
  --f-action:  "DIN Alternate", "Archivo", sans-serif;  /* boutons */
  --f-detail:  "DIN Condensed", "Oswald", sans-serif;   /* corps, labels */

  /* Traits sticker */
  --stroke: 6px;
  --stroke-thin: 3px;
  --stroke-bold: 8px;
  --radius: 2px;
  --radius-pill: 999px;
  --shadow-sticker: 5px 5px 0 var(--contour);

  /* Layout */
  --container: 1280px;
  --gutter: 40px;
  --gutter-mobile: 18px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
}

@media (max-width: 768px) {
  :root { --gutter: var(--gutter-mobile); }
}