/* ==========================================================================
   FUEGO & CARBÓN / FUEGO SMASH — SISTEMA DE VARIABLES DE DISEÑO (variables.css)
   Sector A: Hamburguesería Gourmet de Alta Gama
   Arquitectura HSL Semántica • Modo Oscuro & Modo Claro Dual
   Accesibilidad Universal WCAG 2.1 AA • Tipografía de Alta Gama
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODO OSCURO (PREDETERMINADO): Industrial Oscuro, Carbón y Brasas
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Fondos y Superficies */
  --bg-app: hsl(0, 0%, 10%);                /* Marrón carbón oscuro #1a1a1a */
  --bg-surface: hsl(0, 0%, 14%);            /* Superficie base de tarjetas #242424 */
  --bg-surface-elevated: hsl(0, 0%, 18%);   /* Tarjetas elevadas y modales #2e2e2e */
  --bg-surface-hover: hsl(0, 0%, 22%);      /* Estado hover en elementos interactivos */
  --bg-glass: hsla(0, 0%, 12%, 0.88);       /* Header y overlays traslúcidos */

  /* Bordes y Separadores */
  --border-subtle: hsla(0, 0%, 100%, 0.08);
  --border-medium: hsla(0, 0%, 100%, 0.16);
  --border-focus: hsl(15, 85%, 50%);
  --border-glow: hsla(15, 85%, 50%, 0.45);

  /* Texto y Jerarquía Semántica */
  --text-primary: hsl(30, 20%, 95%);        /* Blanco roto de máxima legibilidad */
  --text-secondary: hsl(30, 10%, 75%);      /* Gris neutro cálido para párrafos */
  --text-muted: hsl(220, 10%, 60%);         /* Metadatos y notas */
  --text-inverse: hsl(0, 0%, 10%);          /* Texto sobre fondos claros */

  /* Paleta de Acento Sector A */
  --color-fire: hsl(15, 85%, 50%);          /* Rojo brasa / Fuego */
  --color-fire-hover: hsl(15, 92%, 44%);
  --color-ember: hsl(25, 90%, 52%);         /* Naranja ascua */
  --color-mustard: hsl(40, 80%, 55%);       /* Amarillo mostaza / Queso cheddar */
  --color-mustard-hover: hsl(40, 88%, 46%);
  --color-gold: hsl(45, 85%, 58%);

  /* Estados de Interfaz */
  --color-success: hsl(152, 72%, 46%);      /* Verde entrega en vivo y stock */
  --color-warning: hsl(38, 92%, 50%);       /* Alertas de escasez */
  --color-danger: hsl(354, 82%, 56%);       /* Badges de descuento */
  --color-info: hsl(205, 85%, 55%);

  /* Sombras y Luces */
  --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.4);
  --shadow-md: 0 8px 24px hsla(0, 0%, 0%, 0.55);
  --shadow-lg: 0 16px 44px hsla(0, 0%, 0%, 0.7);
  --shadow-glow-fire: 0 0 24px hsla(15, 85%, 50%, 0.35);
  --shadow-glow-mustard: 0 0 20px hsla(40, 80%, 55%, 0.28);

  /* Identificador de tema */
  --theme-indicator: "dark";
}

/* --------------------------------------------------------------------------
   2. MODO CLARO DUAL: Crema Marfil Cálido, Cuero Suave, Tipografía Carbón
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  /* Fondos y Superficies */
  --bg-app: hsl(40, 24%, 96%);              /* Crema suave rústico #fbf9f4 */
  --bg-surface: hsl(0, 0%, 100%);           /* Blanco puro */
  --bg-surface-elevated: hsl(40, 18%, 92%); /* Superficie elevada */
  --bg-surface-hover: hsl(40, 22%, 88%);
  --bg-glass: hsla(40, 24%, 96%, 0.9);

  /* Bordes y Separadores */
  --border-subtle: hsla(0, 0%, 0%, 0.1);
  --border-medium: hsla(0, 0%, 0%, 0.2);
  --border-focus: hsl(15, 85%, 45%);
  --border-glow: hsla(15, 85%, 45%, 0.3);

  /* Texto y Jerarquía Semántica */
  --text-primary: hsl(0, 0%, 12%);          /* Carbón profundo contraste 11:1 */
  --text-secondary: hsl(30, 12%, 30%);      /* Texto de lectura */
  --text-muted: hsl(30, 8%, 46%);
  --text-inverse: hsl(30, 20%, 96%);

  /* Paleta de Acento Sector A (Ajustada para fondos claros) */
  --color-fire: hsl(15, 85%, 46%);
  --color-fire-hover: hsl(15, 90%, 38%);
  --color-ember: hsl(25, 88%, 48%);
  --color-mustard: hsl(38, 85%, 44%);
  --color-mustard-hover: hsl(38, 90%, 36%);
  --color-gold: hsl(42, 80%, 46%);

  /* Estados de Interfaz */
  --color-success: hsl(152, 80%, 32%);
  --color-warning: hsl(36, 90%, 42%);
  --color-danger: hsl(354, 85%, 46%);
  --color-info: hsl(205, 85%, 44%);

  /* Sombras y Luces */
  --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.08);
  --shadow-md: 0 8px 24px hsla(0, 0%, 0%, 0.12);
  --shadow-lg: 0 16px 44px hsla(0, 0%, 0%, 0.18);
  --shadow-glow-fire: 0 4px 20px hsla(15, 85%, 46%, 0.22);
  --shadow-glow-mustard: 0 4px 18px hsla(38, 85%, 44%, 0.18);

  --theme-indicator: "light";
}

/* --------------------------------------------------------------------------
   3. DESIGN TOKENS COMPARTIDOS: Tipografía, Escalas y Motion
   -------------------------------------------------------------------------- */
:root {
  /* Familias Tipográficas */
  --font-display: 'Montserrat', 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala Tipográfica Fluida */
  --text-xs: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.25vw, 0.92rem);
  --text-base: clamp(0.96rem, 0.92rem + 0.3vw, 1.06rem);
  --text-lg: clamp(1.12rem, 1.05rem + 0.45vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.2rem + 0.65vw, 1.55rem);
  --text-2xl: clamp(1.6rem, 1.45rem + 0.95vw, 1.95rem);
  --text-3xl: clamp(2.1rem, 1.85rem + 1.5vw, 2.75rem);
  --text-4xl: clamp(2.6rem, 2.2rem + 2.2vw, 3.6rem);

  /* Curvaturas de Borde */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transiciones y Motion */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;

  /* Dimensiones Estructurales */
  --container-max: 1240px;
  --container-narrow: 920px;
  --header-height: 76px;
  --topbar-height: 38px;
}