/* ==========================================================================
   L'ÉPICERIE DU COIN — Design tokens
   Toutes les valeurs de design du site vivent ici. Changer une variable
   ici se répercute sur l'ensemble des pages.
   ========================================================================== */

:root {
  /* --- Couleurs : fonds papier kraft ---------------------------------------
     Le site est clair, esprit papier d'emballage et étiquette de marché.
     Trois kraft très proches (jamais de blanc pur) rythment les sections,
     coupés par de rares aplats ardoise qui signalent un bloc « tableau noir
     du commerçant » (spécialités, prix, appel à l'action).
     ---------------------------------------------------------------------- */
  --c-cream: #fbf6ec;       /* niveau 1, fond de page */
  --c-cream-2: #f4ead7;     /* niveau 2, sections alternées */
  --c-kraft: #ecdcc0;       /* niveau 3, aplats, cartouches, champs de formulaire */
  --c-kraft-deep: #d6bd93;  /* filets et bordures */
  --c-kraft-ink: #9c7844;   /* bordures marquées, pointillés : ≥ 3:1 sur les fonds crème */

  /* --- Couleurs : accents gourmands ----------------------------------------- */
  --c-moutarde: #d9a02a;       /* accent principal, chaleureux */
  --c-moutarde-deep: #8f630f;  /* texte accent et survol, ≥ 4,5:1 sur les fonds crème */
  --c-moutarde-soft: #f0c869;  /* accent sur fond ardoise */
  --c-brique: #b5432e;         /* accent fort : tampons, CTA, prix vedettes */
  --c-brique-deep: #8f3220;    /* survol du brique */

  /* --- Couleurs : verts ------------------------------------------------------ */
  --c-sauge: #7c8a5e;       /* étiquettes, second accent */
  --c-sauge-deep: #5c6944;  /* survol des étiquettes */
  --c-sauge-soft: #b9c29e;  /* voiles et fonds très légers */

  /* --- Couleurs : ardoise et encre -------------------------------------------
     L'ardoise remplace le noir corporate : c'est le tableau du commerçant,
     pas un fond « premium ». Elle n'apparaît que par blocs, jamais en fond
     de page entier.
     ---------------------------------------------------------------------- */
  --c-ardoise: #37454b;      /* fonds sombres, bandeaux d'appel, blocs « du jour » */
  --c-ardoise-deep: #232d32; /* pied de page */
  --c-craie: #f4efe2;        /* texte façon craie sur ardoise */
  --c-ink: #2d2418;          /* texte principal, brun encre (jamais noir pur) */
  --c-ink-soft: #5c4e3b;     /* texte secondaire, ≥ 6:1 sur tous les kraft */

  /* --- Rôles sémantiques ------------------------------------------------- */
  --bg-page: var(--c-cream);
  --bg-alt: var(--c-cream-2);
  --bg-deep: var(--c-ardoise);
  --text-heading: var(--c-ink);
  --text-main: #3a2f22;
  --text-muted: var(--c-ink-soft);
  --text-on-dark: var(--c-craie);
  --text-on-dark-muted: #bcb2a0;
  --border-light: var(--c-kraft-deep);
  --border-dark: rgba(244, 239, 226, 0.14);

  /* --- Typographie ------------------------------------------------------
     Caveat porte le caractère « enseigne peinte à la main » : c'est la voix
     des titres et de la marque. Permanent Marker sert aux tampons, badges et
     prix façon craie. Work Sans assure une lecture courante honnête, sans
     tomber dans le générique.
     ---------------------------------------------------------------------- */
  --font-display: "Caveat", "Segoe Script", cursive;
  --font-stamp: "Permanent Marker", "Segoe Script", cursive;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide : Caveat est une script, elle a besoin de gabarits plus
     généreux qu'une serif classique pour garder son impact. */
  --fs-display: clamp(3.4rem, 1.6rem + 8vw, 7.5rem);
  --fs-h1: clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 2.3vw, 3.3rem);
  --fs-h3: clamp(1.55rem, 1.35rem + 0.9vw, 2rem);
  --fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.05;
  --lh-title: 1.12;
  --lh-body: 1.7;

  --ls-display: 0em;
  --ls-eyebrow: 0.18em;
  --ls-nav: 0.06em;

  /* --- Espacement (échelle 4px) ------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Rythme vertical des sections : fluide */
  --section-y: clamp(4rem, 2.5rem + 6.5vw, 8.5rem);
  --section-y-sm: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  /* --- Grille et gouttières ------------------------------------------------ */
  --shell-max: 1240px;
  --shell-narrow: 780px;
  --shell-wide: 1480px;
  --shell-pad: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.75rem);

  /* --- Chrome ---------------------------------------------------------------
     Le bandeau « MODÈLE » est fixe : sa hauteur décale le header collant et
     sert d'offset au scroll des ancres (scroll-padding-top dans base.css).
     Les rayons sont volontairement irréguliers : jamais deux coins identiques
     sur un même cartouche, esprit étiquette découpée à la main.
     ---------------------------------------------------------------------- */
  --demo-bar-h: 34px;
  --header-h: 76px;
  --radius: 5px 9px 6px 10px;
  --radius-sm: 3px 6px 4px 7px;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 34px -24px rgba(45, 36, 24, 0.55);
  --shadow-lift: 0 24px 54px -26px rgba(45, 36, 24, 0.6);

  /* --- Mouvement ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 850ms;

  --z-watermark: 1;
  --z-header: 100;
  --z-demo-bar: 120;
  --z-menu: 110;
  --z-lightbox: 200;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.0625rem;
    --header-h: 92px;
  }
}