/* Pourlich€ : jetons du design system. Tout le reste du CSS lit ces variables, jamais une valeur en dur. */
:root {
  /* Couleurs : le zinc, la bouteille, la tomate, la moutarde, le ticket. Rien d'autre. */
  --c-bouteille: #0f3d2e;       /* fond principal, vert bouteille */
  --c-bouteille-nuit: #082319;  /* fond profond, footer, néon */
  --c-ardoise: #1d2724;         /* ardoise du plat du jour */
  --c-bois: #6e4527;            /* cadre de l'ardoise */
  --c-tomate: #c8321f;          /* action secondaire, texte blanc dessus : 5,1:1 */
  --c-tomate-vif: #e4472f;      /* décor seulement (vichy, tampons), jamais sous du texte courant */
  --c-moutarde: #f2b630;        /* action principale, texte encre dessus : 10:1 */
  --c-ticket: #fbf8f0;          /* papier ticket de caisse */
  --c-blanc: #ffffff;           /* bord d'autocollant */
  --c-encre: #15201b;           /* texte sur clair */
  --c-encre-douce: #50574f;     /* texte secondaire sur ticket : 6,9:1 */
  --c-craie: #eef0e7;           /* texte sur foncé */
  --c-craie-douce: #b7ccbf;     /* texte secondaire sur bouteille : 7:1 */
  --c-filet: rgba(21, 32, 27, 0.18);

  /* Typo */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --f-craie: "Caveat Brush", "Comic Sans MS", cursive;

  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-md: 1.0625rem;   /* 17, corps */
  --t-lg: 1.3125rem;   /* 21 */
  --t-xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --t-3xl: clamp(3.25rem, 1.8rem + 7vw, 7.5rem);
  --lh-body: 1.55;
  --lh-tight: 0.92;

  /* Espacements (base 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px;
  --max: 1180px;
  --max-texte: 66ch;

  /* Rayons : chaque objet a le sien, pas un rayon unique partout */
  --r-sticker: 22px;   /* autocollant découpé à la forme */
  --r-bouton: 999px;   /* pastille autocollante */
  --r-ticket: 2px;     /* papier */
  --r-photo: 4px;      /* polaroïd */
  --r-champ: 8px;

  /* Ombres : un autocollant collé ne flotte pas, son ombre est courte et sèche */
  --sh-sticker: 0 1px 0 rgba(0,0,0,.18), 0 8px 14px -8px rgba(0,0,0,.55);
  --sh-ticket: 0 18px 30px -18px rgba(0,0,0,.6);
  --sh-objet: 0 24px 40px -20px rgba(0,0,0,.55);

  /* Motifs */
  --vichy: repeating-linear-gradient(0deg, rgba(228,71,47,.55) 0 14px, transparent 14px 28px),
           repeating-linear-gradient(90deg, rgba(228,71,47,.55) 0 14px, transparent 14px 28px),
           #fbf3ee;
  --focus: 0 0 0 3px var(--c-ticket), 0 0 0 6px var(--c-tomate);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }