/* ========================================
   VARIABLES.CSS — MarMon Pizza Design System
   Tokens de diseño estrictos
   ======================================== */

:root {
  /* ---- Marca MarMon ---- */
  --primary: #F5A623;
  --primary-light: #FFC857;
  --primary-dark: #C8841C;

  /* ---- Backgrounds ---- */
  --bg-darkest: #0A0A0A;
  --bg-dark: #1A1A1A;
  --bg-card: #161616;

  /* ---- Italianos ---- */
  --accent-red: #D32F2F;
  --accent-green: #2E7D32;

  /* ---- Textos ---- */
  --text-light: #FAF7F0;
  --text-muted: #8A8A8A;
  --text-dim: #555555;

  /* ---- WhatsApp ---- */
  --whatsapp: #25D366;

  /* ---- Sombras ---- */
  --shadow-gold: 0 12px 48px rgba(245, 166, 35, 0.25);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* ---- Tipografía ---- */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-script: 'Italianno', cursive;

  /* ---- Escalas tipográficas (fluid mobile→desktop) ---- */
  --text-hero: clamp(2.5rem, 8vw, 6rem);
  --text-h1: clamp(2.5rem, 8vw, 6rem);
  --text-h2: clamp(1.8rem, 5vw, 3.5rem);
  --text-h3: clamp(1.3rem, 3vw, 2rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-small: clamp(0.85rem, 1.2vw, 1rem);
  --text-marquee: clamp(4rem, 14vw, 18rem);

  /* ---- Transiciones ---- */
  --ease-smooth: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}