/*
 * Tokens de diseño. ÚNICO lugar donde se definen colores, tipografía y medidas.
 * Para personalizar la marca del restaurante, cambia solo los valores de este archivo.
 * El resto del CSS usa siempre var(--…).
 */
:root {
  /* Marca */
  --color-primario: #d62828;
  --color-primario-hover: #b71f1f;
  --color-primario-contraste: #ffffff;
  --color-secundario: #f4a261;
  --color-secundario-contraste: #1d1d1f;

  /* Superficies y texto */
  --color-fondo: #f7f7f7;
  --color-superficie: #ffffff;
  --color-texto: #1d1d1f;
  --color-texto-suave: #5f6368;
  --color-borde: #e3e3e3;
  --color-foco: #1a73e8;

  /* Estados (y su versión suave para fondos) */
  --color-exito: #1e8e3e;
  --color-exito-suave: #e6f4ea;
  --color-alerta: #b06000;
  --color-alerta-suave: #fef3e0;
  --color-error: #c5221f;
  --color-error-suave: #fce8e6;
  --color-info: #174ea6;
  --color-info-suave: #e8f0fe;
  --color-neutro: #5f6368;
  --color-neutro-suave: #eeeeee;

  /* Menú */
  --color-chip: #ffffff;
  --color-chip-activo: #1d1d1f;
  --color-chip-activo-texto: #ffffff;
  --color-imagen-vacia: #fde7d4;
  --color-imagen-vacia-texto: #b5451b;
  --color-esqueleto: #e9e9e9;
  --color-esqueleto-brillo: #f5f5f5;

  /* Cocina: semáforo de retraso y resaltado de pedidos nuevos (texto oscuro sobre fondo: AA) */
  --color-semaforo-verde: #e6f4ea;
  --color-semaforo-verde-texto: #0d5323;
  --color-semaforo-amarillo: #ffe082;
  --color-semaforo-amarillo-texto: #4a3500;
  --color-semaforo-rojo: #c5221f;
  --color-semaforo-rojo-texto: #ffffff;
  --color-pedido-nuevo: #1a73e8;
  --color-pedido-nuevo-brillo: rgb(26 115 232 / 0.35);
  --color-notas-fondo: #fff4c2;
  --color-efectivo-fondo: #fce8e6;
  --color-efectivo-texto: #8c1d18;
  --color-barra-fondo: #1d1d1f;
  --color-barra-texto: #ffffff;

  /* Velo detrás de los diálogos */
  --color-velo: rgb(0 0 0 / 0.45);

  /* Tipografía */
  --fuente-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 2rem;
  --peso-normal: 400;
  --peso-fuerte: 600;

  /* Espaciado */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;

  /* Formas */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-pildora: 999px;
  --sombra-1: 0 1px 3px rgb(0 0 0 / 0.12);
  --sombra-2: 0 4px 16px rgb(0 0 0 / 0.14);

  /* Medidas */
  --ancho-maximo: 960px;
  --alto-encabezado: 56px;
  --objetivo-tactil: 44px;
  --objetivo-tactil-cocina: 64px;

  /* Breakpoints de referencia (las media queries no aceptan var):
     tablet ≥ 600px, escritorio ≥ 960px */
}