/* =====================================================================
   tokens.css — Système de design "Le Bistrot Démo" (édition premium)
   Source unique de vérité pour couleurs, typographie, espacements,
   rayons, ombres et durées d'animation. N'affecte que index.html
   (kitchen.html ne référence aucune de ces variables).
   ===================================================================== */
:root {
  /* ---------- Couleurs neutres — ivoire chaleureux ---------- */
  --bg: #faf6f1;
  --bg-alt: #f3ebe1;
  --surface: #fffaf3;
  --card: #ffffff;
  --border: #e9decf;
  --border-strong: #ddccb4;
  --ink: #241a13;
  --text: #241a13;
  --text-2: #6c5c4d;
  --text-3: #a3907d;
  --on-dark: #f4ebe0;
  --on-dark-2: #c9b8a6;

  /* ---------- Marque — ancrée sur l'orange existant ---------- */
  --primary: #e8562a;
  --primary-d: #c8461f;
  --primary-deep: #9c3717;
  --primary-light: #fde8d5;
  --primary-tint: #fff3ec;
  --accent-gold: #b8863a;
  --accent-gold-light: #ecd9b3;
  --ok: #4d7c4a;
  --danger: #b3301c;

  /* ---------- Dégradés ---------- */
  --grad-hero: linear-gradient(135deg, #e8562a 0%, #f2884a 55%, #f4a94f 100%);
  --grad-ribbon: linear-gradient(90deg, #c8461f, #e8562a 50%, #c8461f);
  --grad-placeholder: linear-gradient(150deg, #fef3ec, #fde0c4);
  --grad-dark: linear-gradient(180deg, #241a13, #180f09);

  /* ---------- Typographie ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.85rem;      /* 13.6px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 1.75rem;      /* 28px */
  --fs-2xl: 2.375rem;    /* 38px */
  --fs-3xl: 3.25rem;     /* 52px */
  --fs-4xl: 4.25rem;     /* 68px */

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-eyebrow: 0.16em;

  /* ---------- Espacement (échelle 4/8pt) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Rayons ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;
  --radius: var(--radius-md); /* compat. */

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 2px rgba(36, 26, 19, .06), 0 1px 1px rgba(36, 26, 19, .04);
  --shadow-md: 0 8px 24px rgba(36, 26, 19, .10);
  --shadow-lg: 0 24px 64px rgba(36, 26, 19, .16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .4);
  --shadow-glow: 0 0 0 4px rgba(232, 86, 42, .16);
  --shadow-glow-gold: 0 0 0 4px rgba(184, 134, 58, .18);

  /* ---------- Mouvement ---------- */
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- Mise en page ---------- */
  --container: 1180px;
  --container-narrow: 760px;
  --topbar-h: 72px;
}

/* Repères de rupture (documentés — utilisés directement en @media) :
   480px  (--bp-sm)  grandes tailles de téléphone
   768px  (--bp-md)  tablettes
   1024px (--bp-lg)  petits écrans de bureau
   1280px (--bp-xl)  grands écrans de bureau                         */