:root {
  /* Colors — palette de base */
  --color-cream: #FBF4E5;          /* ivoire */
  --color-light-clay: #F1E8D8;     /* argile claire (V3 — BORDEAUX GRAPHITE, valeur définitive §5) */
  --color-warm-white: #FEFBF5;     /* blanc chaud */
  --color-sand: #E7D5AE;           /* fond neutre chaud (photos/placeholders) — pas une couleur de marque, inchangé */

  /* ==========================================================================
     V3 — BORDEAUX GRAPHITE (remplace l'expérimentation précédente "Bordeaux +
     Brun"). Le brun (#302017) est intégralement retiré comme couleur de
     marque/composant (règle absolue §6 du brief V3) : --color-brand-dark
     pointe désormais sur le GRAPHITE, plus sur le brun. --color-warm-black et
     --color-warm-gray restent les noms de variable utilisés dans tout
     style.css (~35 sélecteurs : titres, CTA, corps de texte) : on les fait
     pointer vers les nouvelles teintes plutôt que de renommer chaque
     sélecteur — même logique que l'alignement de marque précédent.

     Hiérarchie (§7 du brief V3) :
       BORDEAUX   = IDENTITÉ    (wordmark, eyebrows, prix, nav active, liens)
       GRAPHITE   = STRUCTURE / ACTION (titres, CTA, noms de plats, La Brasa bg)
       IVOIRE     = CHALEUR / RESPIRATION (fonds)
       CHAMPAGNE  = FINITION (filets, séparateurs, accents sur fond sombre)
     ========================================================================== */
  --color-brand-dark: #282526;           /* GRAPHITE — était #302017 (brun) */
  --color-brand-graphite: #282526;       /* alias explicite, même valeur que --color-brand-dark */
  --color-brand-graphite-soft: #302D2C;  /* graphite doux — grands textes, hover CTA (jamais un marron) */
  --color-brand-bordeaux: #6D3F46;       /* bordeaux Continental — couleur maître, référence carte physique */
  --color-brand-bordeaux-dark: #542E36;  /* bordeaux profond — footer / grandes surfaces bordeaux */
  --color-brand-champagne: #C4A878;      /* micro-accent uniquement — filets/séparateurs, jamais texte critique */

  /* Gris pierre chaud — texte secondaire/descriptions/métadonnées. Valeur
     définitive du brief (#716A67) recalculée pour rester ≥4.5:1 sur TOUS les
     fonds où ce token est réellement utilisé (ivoire 4.84:1 OK, mais argile
     claire 4.36:1 et sable 3.67:1 échouaient sous 4.5:1 — voir
     .menu-featured/.menu-supplement/.menu-del-dia). #605A58 : ivoire 6.18:1,
     blanc chaud 6.56:1, argile claire 5.57:1, sable 4.68:1 — AA partout. */
  --color-brand-text: #605A58;

  --color-warm-black: var(--color-brand-dark);  /* → graphite */
  --color-warm-gray: var(--color-brand-text);   /* → gris pierre chaud (recalculé) */

  --color-border: rgba(40, 37, 38, 0.12);        /* RGB du graphite (était RGB du brun 48,32,23) */
  --color-border-strong: rgba(40, 37, 38, 0.4);

  /* DÉPRÉCIÉS — Bronze (Brand Alignment, V2) : retiré de tout usage visuel en
     V3 BORDEAUX GRAPHITE (§6/§16 du brief V3 — remplacé par bordeaux,
     champagne ou graphite selon la fonction de chaque sélecteur, jamais par
     un search/replace aveugle). Valeurs conservées pour traçabilité
     historique — plus aucun sélecteur de style.css n'y fait référence. */
  --color-brand-bronze: #9B7339;
  --color-brand-bronze-dark: #8B6733;
  --color-brand-bronze-light: #AA8856;

  /* DÉPRÉCIÉS (Brand Alignment, hérité de V2) : rouge braise abandonné comme
     couleur de marque. Valeurs conservées inchangées pour traçabilité
     historique. */
  --color-ember-red: #a90017;
  --color-ember-red-hover: #8f0013;
  --color-terracotta: #b85e31;
  --color-copper: #b47f52;

  /* Footer (V3) : fond --color-brand-bordeaux-dark. Texte secondaire en
     champagne — 5.06:1 sur #542E36, AA. Remplace l'ancien #9A8E89 (calculé
     pour un fond brun, obsolète ici). */
  --color-footer-muted: var(--color-brand-champagne);

  /* Typography */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono-label: ui-monospace, Menlo, monospace;

  --text-h1-desktop: 44px;
  --text-h1-mobile: 24px;
  --text-h2-desktop: 26px;
  --text-h2-mobile: 19px;
  --text-h3-desktop: 19px;
  --text-h3-mobile: 16px;
  --text-body-desktop: 15px;
  --text-body-mobile: 13.5px;
  --text-nav: 15px;
  --text-button: 15px;
  --text-eyebrow: 11px;

  /* Spacing */
  --space-section-x-desktop: 64px;
  --space-section-x-mobile: 20px;
  --space-section-y-desktop: 56px;
  --space-section-y-mobile: 30px;
  --space-card-gap-desktop: 24px;
  --space-card-gap-mobile: 14px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 20px; /* labels only, never buttons */

  /* Header */
  --header-height-desktop: 92px;
  --header-height-mobile: 62px;

  /* Mobile viewport reference */
  --mobile-viewport-width: 390px;
  --mobile-viewport-height: 844px;

  /* Shadows (used sparingly) */
  --shadow-card: 0 2px 16px rgba(20, 15, 10, 0.18);
  --shadow-menu-panel: 0 8px 24px rgba(20, 15, 10, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}