/* ============================================================================
   Tokens — única fuente de verdad de la marca y las escalas.
   Lo cargan el panel, el sitio público y el menú digital.

   Por qué existe: los tres sistemas visuales (panel oscuro, tablero de pedidos
   claro, menú digital crema) redeclaraban los mismos colores por su cuenta —
   #0EB5B9 aparecía en tres archivos, y había 14 valores de border-radius
   distintos solo en admin.css. Cambiar el teal de la marca obligaba a buscar y
   reemplazar en tres sitios y rezar.

   Cómo se usa: cada tema sigue teniendo SUS nombres (--bg, --primary, --ops-…),
   pero ahora los deriva de aquí en vez de escribir el hex. Las reglas de cada
   hoja no cambian; cambia de dónde sale el valor.
   ============================================================================ */

:root {
  /* ── Marca ──────────────────────────────────────────────────────────────
     Teal = El Caribe · Coral = Saucesalicious. Cada sucursal puede sobrescribir
     --primary desde config.json; esto es el valor de fábrica. */
  --brand-teal:     #0EB5B9;
  --brand-teal-l:   #2ECFCD;
  --brand-teal-d:   #0A8A8D;
  --brand-coral:    #E8704A;
  --brand-coral-l:  #F4845F;
  --brand-coral-d:  #C05030;

  /* Fondo del logo de Saucesalicious (arte claro sobre negro) */
  --brand-sauce-bg: #0A0A0A;

  /* ── Estado ─────────────────────────────────────────────────────────────
     Dos versiones de cada uno: la clara para texto sobre fondo oscuro, la
     sólida para texto sobre fondo claro (tablero de pedidos y menú digital). */
  --ok:        #34D399;
  --ok-solid:  #1E9E6A;
  --warn:      #FBBF24;
  --err:       #F87171;
  --err-solid: #C64848;
  --whatsapp:  #25D366;

  /* ── Radios ─────────────────────────────────────────────────────────────
     Una escala de cinco. Antes había catorce valores sueltos, que es lo que
     hace que dos tarjetas contiguas se vean sutilmente descuadradas. */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ── Espaciado ──────────────────────────────────────────────────────────
     En rem para que acompañe el tamaño de letra del navegador. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ── Movimiento ─────────────────────────────────────────────────────────── */
  --t-fast: 0.15s;
  --t-med:  0.25s;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Sombras ────────────────────────────────────────────────────────────── */
  --sh-sm: 0 1px 3px rgba(15, 42, 34, 0.05);
  --sh-md: 0 10px 24px rgba(35, 32, 28, 0.10);
  --sh-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* Respeta a quien pidió menos animación en su sistema. Afecta a los tres temas
   de una vez: pulsos de licencia, entrada de pedidos nuevos, transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible y consistente en los tres temas. Antes solo lo tenían los
   inputs del panel: navegar con teclado por los botones no mostraba nada. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, var(--brand-teal));
  outline-offset: 2px;
  border-radius: var(--r-xs);
}