:root {
  /* =========================================================
     PALETA DE COLORES PRINCIPAL (Lineamientos Oficiales POS)
     ========================================================= */
  --primary: #007bff;
  --primary-hover: #0056b3;
  --primary-light: #e6f2ff;
  --primary-gradient: linear-gradient(135deg, #007bff 0%, #0052cc 100%);

  --secondary: #6366f1;
  --secondary-hover: #4f46e5;
  --secondary-light: #e0e7ff;

  /* Estados de Disponibilidad y Alertas */
  --success: #28a745;
  --success-hover: #218838;
  --success-light: #d4edda;
  --success-bg: rgba(40, 167, 69, 0.15);

  --warning: #ffc107;
  --warning-hover: #e0a800;
  --warning-light: #fff3cd;
  --warning-bg: rgba(255, 193, 7, 0.18);

  --danger: #dc3545;
  --danger-hover: #c82333;
  --danger-light: #f8d7da;
  --danger-bg: rgba(220, 53, 69, 0.15);

  --info: #17a2b8;
  --info-light: #d1ecf1;
  --info-bg: rgba(23, 162, 184, 0.15);

  /* Acentos de Categorías de Comida */
  --accent-wings: #e11d48;
  --accent-stew: #d97706;
  --accent-side: #16a34a;
  --accent-burger: #f59e0b;
  --accent-drinks: #0284c7;
  --accent-combos: #8b5cf6;

  /* =========================================================
     MODO OSCURO (Por defecto - Cómodo para terminales de caja)
     ========================================================= */
  --bg-main: #0b132b;
  --bg-surface: #1c2541;
  --bg-surface-elevated: #243254;
  --bg-card: rgba(28, 37, 65, 0.95);
  --bg-card-hover: #2e3e6b;
  --bg-input: #0f172a;
  
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0b132b;
  
  --border-color: #2c3a5e;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: #007bff;

  /* Sombras y Efectos */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 10px 10px -5px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 15px rgba(0, 123, 255, 0.35);

  /* Bordes Redondeados */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Tipografía (Segoe UI / Roboto) */
  --font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Consolas', 'JetBrains Mono', 'Fira Code', monospace;
}

/* =========================================================
   MODO CLARO (Limpio, Blanco y Gris Claro #F5F5F5)
   ========================================================= */
[data-theme="light"] {
  --bg-main: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #eef2f8;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f4fc;
  --bg-input: #ffffff;
  
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #8392a5;
  --text-inverse: #ffffff;
  
  --border-color: #dbe3ee;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-focus: #007bff;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 15px rgba(0, 123, 255, 0.2);
}

/* =========================================================
   TEMA DE INSTANCIA: COCINA ECONÓMICA (Cálido y Tradicional)
   ========================================================= */
html[data-instance="cocina"] {
  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-light: #ffedd5;
  --primary-gradient: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --border-focus: #ea580c;
}

html[data-instance="cocina"][data-theme="dark"] {
  --bg-main: #18120c;
  --bg-surface: #241b13;
  --bg-surface-elevated: #35271c;
  --bg-card: rgba(36, 27, 19, 0.95);
  --bg-card-hover: #483526;
  --bg-input: #120e09;
  --border-color: #4a3625;
}

/* =========================================================
   TEMA DE INSTANCIA: SNACKS & ALITAS (Moderno y Neón)
   ========================================================= */
html[data-instance="snacks"] {
  --primary: #007bff;
  --primary-hover: #0056b3;
  --primary-gradient: linear-gradient(135deg, #007bff 0%, #0052cc 100%);
}