/* Potager des Landelles — jetons du design system (tokens.json), polices et styles de texte. */
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --papier: #fdf5e7;
  --encre: #1c1b19;
  --encre-douce: #5c5850;
  --jaune: #f6d36b;
  --ciel: #8ec5e6;
  --rose: #e8798a;
  --vert: #a3cc85;
  --filet: #d6d0c4;

  --fond: var(--papier);
  --surface: var(--papier);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --action: var(--jaune);
  --sur-action: var(--encre);
  --survol: var(--ciel);
  --contour: var(--encre);
  --focus: var(--encre);

  --font-titre: "Kalam", "Segoe Print", cursive;
  --font-texte: "Alegreya Sans", "Source Sans 3", system-ui, sans-serif;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 40px;
  --espace-8: 64px;

  --rayon-s: 12px;
  --rayon-m: 18px;
  --rayon-plein: 999px;

  --trait-plume: 2px;
  --trait-fin: 1.5px;
}

.affiche { font: 700 68px/72px var(--font-titre); }
.titre { font: 700 32px/38px var(--font-titre); }
.titre-ecran { font: 700 36px/42px var(--font-titre); }
.note { font: 400 22px/28px var(--font-titre); }
.produit { font: 700 21px/26px var(--font-texte); }
.total { font: 800 21px/26px var(--font-texte); }
.bouton { font: 800 20px/24px var(--font-texte); }
.corps { font: 400 17px/26px var(--font-texte); }
.meta { font: 400 15px/20px var(--font-texte); }