/* ==========================================================================
   TRATTORIA ESEMPIO — 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 -------------------------------------------
     Le site est clair. Le rythme entre sections vient de trois crèmes très
     proches (jamais de blanc pur, qui casserait l'effet papier) coupées par
     de rares aplats bois ou bordeaux. Les grandes surfaces sombres restent
     l'exception : elles signalent un appel à l'action.
     ---------------------------------------------------------------------- */
  --c-cream: #faf4e9;      /* niveau 1, fond de page */
  --c-cream-2: #f2e7d5;    /* niveau 2, sections alternées */
  --c-cream-3: #ede0ca;    /* niveau 3, aplats discrets, champs de formulaire */
  --c-linen: #e5d6be;      /* filets et bordures */
  --c-linen-deep: #d6c2a2; /* bordures marquées */

  /* --- Couleurs : accents chauds ------------------------------------------ */
  --c-terracotta: #c1552e;      /* accent principal */
  --c-terracotta-deep: #a0421f; /* texte accent et survol, contraste AA sur crème */
  --c-terracotta-soft: #e08a63; /* accent sur fond bois */
  --c-bordeaux: #6b2233;        /* prix, sections denses */
  --c-ochre: #d8a24a;           /* étoiles des avis, détails */

  /* --- Couleurs : verts --------------------------------------------------- */
  --c-olive: #5e6b45;      /* étiquettes, second accent */
  --c-olive-deep: #4a5636; /* survol des étiquettes */
  --c-sage: #9ba986;       /* voiles et fonds très légers */

  /* --- Couleurs : bois et encre ------------------------------------------- */
  --c-wood: #3b2e22;       /* fonds sombres, bandeaux d'appel */
  --c-wood-deep: #281f17;  /* pied de page */
  --c-ink: #2b2118;        /* texte principal */
  --c-ink-soft: #5a4b3c;   /* texte secondaire, ≥ 6:1 sur toutes les crèmes */

  /* --- Rôles sémantiques -------------------------------------------------- */
  --bg-page: var(--c-cream);
  --bg-alt: var(--c-cream-2);
  --bg-deep: var(--c-wood);
  --text-heading: var(--c-ink);
  --text-main: #3a2f24;
  --text-muted: var(--c-ink-soft);
  --text-on-dark: #f0e6d6;
  --text-on-dark-muted: #c3b4a0;
  --border-light: var(--c-linen);
  --border-dark: rgba(250, 244, 233, 0.16);

  /* --- Typographie --------------------------------------------------------
     Fraunces porte le caractère « enseigne artisanale » : elle est réglée
     sur son axe SOFT pour arrondir les terminaisons, et sur WONK pour ses
     italiques penchées. Karla assure la lecture courante.
     ---------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide : aucune media query nécessaire pour le texte */
  --fs-display: clamp(3rem, 1.4rem + 7vw, 6.75rem);
  --fs-h1: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.85rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.02;
  --lh-title: 1.14;
  --lh-body: 1.72;

  --ls-display: -0.025em;  /* les grandes serif respirent mieux resserrées */
  --ls-eyebrow: 0.2em;     /* surtitres en capitales très espacées */
  --ls-nav: 0.09em;

  /* --- 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: 1520px;
  --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).
     ---------------------------------------------------------------------- */
  --demo-bar-h: 34px;
  --header-h: 72px;
  --radius: 3px;      /* la trattoria est franche, pas arrondie */
  --radius-lg: 6px;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 40px -26px rgba(43, 33, 24, 0.5);
  --shadow-lift: 0 26px 60px -30px rgba(43, 33, 24, 0.55);

  /* --- 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: 88px;
  }
}