/* ============================================================================
   Kabana Food — Design tokens
   DA : menu print fast-food. Papier blanc balayé d'un rouge franc en coin,
   bandeaux rubans rouges pliés, étiquettes de prix rouges, noir du badge,
   étoiles orange du logo. Typo : Anton (condensée) + Pacifico (script logo)
   + Inter (labeur).
   ========================================================================== */

:root {
  /* ========== PALETTE SOURCE (prélevée sur les menus imprimés) ========== */
  --kf-red:      #e01414;  --kf-red-rgb: 224, 20, 20;    /* rouge enseigne          */
  --kf-red-hot:  #fb2323;                                /* haut des rubans         */
  --kf-red-deep: #b90f0f;                                /* bas des rubans          */
  --kf-red-fold: #8c0909;                                /* pli sombre des rubans   */
  --kf-orange:   #f08a1d;  --kf-orange-rgb: 240, 138, 29; /* étoiles / anneau logo  */
  --kf-ink:      #161616;  --kf-ink-rgb: 22, 22, 22;     /* noir du badge           */
  --kf-ink-2:    #262626;
  --kf-paper:    #ffffff;
  --kf-paper-2:  #f7f4f1;  /* sections alternées, blanc cassé chaud */
  --kf-line:     #ececec;  /* filets de cartes */
  --kf-text:     #1c1c1c;
  --kf-muted:    #6d6d6d;

  /* Dégradé signature des rubans / boutons */
  --kf-ribbon-grad: linear-gradient(180deg, var(--kf-red-hot) 0%, var(--kf-red) 55%, var(--kf-red-deep) 100%);

  /* Ombres portées douces (le menu est imprimé : ombres réalistes, zéro néon) */
  --kf-shadow-red: 0 10px 22px -10px rgba(160, 12, 12, 0.55);
  --kf-shadow-card: 0 14px 30px -18px rgba(40, 12, 8, 0.28);
  --kf-shadow-card-hover: 0 22px 44px -20px rgba(40, 12, 8, 0.38);

  /* ========== ALIAS HISTORIQUES (base/layout/components s'appuient dessus) ========== */
  --primary: var(--kf-red);
  --primary-rgb: var(--kf-red-rgb);
  --accent: var(--kf-red);
  --accent-rgb: var(--kf-red-rgb);
  --bg-dark: var(--kf-ink);
  --bg-card: var(--kf-paper);
  --text-main: var(--kf-text);
  --text-muted: var(--kf-muted);
  --border-color: var(--kf-line);

  /* Alias de l'ancienne peau néon : mappés sur la nouvelle palette pour que
     tout var(--kb-*) résiduel retombe sur des couleurs cohérentes. */
  --kb-magenta: var(--kf-red);      --kb-magenta-rgb: var(--kf-red-rgb);
  --kb-cyan: var(--kf-orange);      --kb-cyan-rgb: var(--kf-orange-rgb);
  --kb-purple: var(--kf-red-deep);  --kb-purple-rgb: 185, 15, 15;
  --kb-red: var(--kf-red);          --kb-red-rgb: var(--kf-red-rgb);
  --kb-outline: var(--kf-ink);      --kb-outline-rgb: var(--kf-ink-rgb);
  --kb-deep: var(--kf-ink);
  --kb-ink: var(--kf-paper);
  --kb-ink-2: var(--kf-paper-2);
  --kb-card: var(--kf-paper);
  --kb-card-2: var(--kf-paper-2);
  --kb-cream: var(--kf-text);
  --kb-muted: var(--kf-muted);

  /* ========== COLORS ========== */
  --color-primary: var(--kf-red);
  --color-primary-hover: var(--kf-red-deep);
  --color-primary-light: rgba(var(--kf-red-rgb), 0.12);
  --color-secondary: var(--kf-paper-2);
  --color-secondary-hover: #efeae5;
  --color-accent: var(--kf-orange);
  --color-accent-hover: #f79b3c;
  --color-bg: var(--kf-paper);
  --color-bg-alt: var(--kf-paper-2);
  --color-bg-dark: var(--kf-ink);
  --color-text: var(--kf-text);
  --color-text-light: var(--kf-muted);
  --color-text-inverse: #ffffff;
  --color-border: var(--kf-line);
  --color-success: #1f9d55;
  --color-warning: #e08a00;
  --color-error: #d92638;
  --color-info: var(--kf-orange);

  /* Utilisé en dur par certains templates (checkout) — ne pas supprimer. */
  --bg: var(--kf-paper);

  /* ========== TYPOGRAPHY ========== */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Titrage condensé du menu (« TACOS », « SMASH M1 »). */
  --font-family-heading: 'Anton', 'Arial Narrow', Impact, sans-serif;
  /* Micro-UI : libellés, badges, compteurs — même voix condensée. */
  --font-family-ui: 'Anton', 'Arial Narrow', Impact, sans-serif;
  /* Script du logo (« Kabana »). */
  --font-family-accent: 'Pacifico', 'Comic Sans MS', cursive;
  /* Montants : blanc sur étiquette rouge, comme les prix du menu. */
  --font-family-price: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-family-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== SPACING ========== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ========== BORDERS & RADIUS (rubans et étiquettes : angles francs) ========== */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 3px 0 rgb(30 10 8 / 0.10);
  --shadow-md: 0 6px 16px -6px rgb(30 10 8 / 0.18);
  --shadow-lg: 0 16px 34px -14px rgb(30 10 8 / 0.24);
  --shadow-xl: 0 28px 60px -24px rgb(30 10 8 / 0.30);

  /* ========== TRANSITIONS ========== */
  --transition-fast: 140ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 320ms ease;

  /* ========== LAYOUT ========== */
  --container-max-width: 1200px;
  --container-padding: var(--space-4);
  --header-height: 76px;
  --footer-height: auto;
  --grid-gap: var(--space-6);
  --products-grid-columns: repeat(auto-fill, minmax(280px, 1fr));
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}