/* ==========================================================================
   LE RENARD CUIVRÉ — 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 bois chaud ------------------------------------------
     Le site est sombre du sol au plafond, dans un registre brun noyer chaud
     plutôt que le vert bouteille froid d'origine (qui, très désaturé, pouvait
     virer au bleu-nuit selon les écrans) : boiseries de taverne, comptoir
     patiné, esprit auberge de village. Le rythme entre sections vient de
     trois bruns très proches, coupés par un fond quasi noir réservé aux
     appels à l'action.
     ---------------------------------------------------------------------- */
  --c-wood: #1a130d;        /* niveau 1, fond de page (noyer très sombre) */
  --c-wood-2: #221a12;      /* niveau 2, sections alternées */
  --c-wood-3: #2c2116;      /* niveau 3, panneaux, cadres, champs de formulaire */
  --c-oak: #4a3722;         /* filets et bordures, valeur pleine (SVG, dégradés) */
  --c-oak-deep: #0f0a06;    /* fond profond, quasi noir, pied de page et bandeaux d'appel */

  /* --- Couleurs : cuivre et laiton ------------------------------------------- */
  --c-amber: #c17d3e;         /* accent principal, enseignes et boutons */
  --c-amber-deep: #e8b273;    /* texte accent sur fond sombre, contraste AA */
  --c-amber-dim: #8f5a28;     /* survol des boutons pleins (assombri, pas éclairci) */
  --c-copper: #c1614a;        /* prix, second accent : cuivre-brique éclairci pour la lecture */
  --c-brass: #dfae52;         /* étoiles des avis, détails de laiton poli */

  /* --- Couleurs : terre cuite et cuir ------------------------------------------- */
  --c-bottle: #a85c3a;      /* étiquettes, bordures d'accent secondaire */
  --c-bottle-deep: #e2a37c; /* texte sur fond sombre pour la variante terre cuite */
  --c-sage: #5c4530;        /* voiles et filets discrets */

  /* --- Couleurs : encre et lecture ------------------------------------------- */
  --c-cream: #f2e8d8;       /* texte principal, blanc cassé chaleureux */
  --c-cream-soft: #d4c4a8;  /* texte secondaire, ≥ 4.5:1 sur tous les bruns */
  --c-cream-dim: #a89678;   /* texte tertiaire, légendes, métadonnées */

  /* --- Rôles sémantiques -------------------------------------------------- */
  --bg-page: var(--c-wood);
  --bg-alt: var(--c-wood-2);
  --bg-deep: var(--c-oak-deep);
  --text-heading: var(--c-cream);
  --text-main: var(--c-cream-soft);
  --text-muted: var(--c-cream-dim);
  --text-on-dark: var(--c-cream);
  --text-on-dark-muted: var(--c-cream-dim);
  --border-light: rgba(236, 231, 218, 0.14);
  --border-dark: rgba(236, 231, 218, 0.09);

  /* --- Typographie ----------------------------------------------------------
     Rye porte le caractère « enseigne de taverne » : réservée à la marque et
     aux grands titres, elle perd en lisibilité aux petites tailles. Fraunces
     prend le relais pour les titres de section, avec ses italiques penchées.
     Karla assure la lecture courante.
     ---------------------------------------------------------------------- */
  --font-enseigne: "Rye", "Iowan Old Style", Georgia, serif;
  --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(2.75rem, 1.3rem + 6.6vw, 6rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.65rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --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.04;
  --lh-title: 1.16;
  --lh-body: 1.72;

  --ls-display: 0.01em;
  --ls-eyebrow: 0.2em;
  --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;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 40px -26px rgba(4, 8, 6, 0.65);
  --shadow-lift: 0 26px 60px -30px rgba(4, 8, 6, 0.7);

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