/* Variables de diseño compartidas por el catálogo y el panel.
   Los colores del negocio (--marca, --acento) llegan desde la configuración (js/comun/tema.js).
   Aquí solo hay neutros y valores por defecto. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fuentes/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../fuentes/barlow-700.woff2") format("woff2"); }

:root {
  /* Valores por defecto mientras carga la configuración */
  --marca: #1f5fbf;
  --marca-boton: #1f5fbf;
  --sobre-marca: #ffffff;
  --marca-texto-claro: #1f5fbf;
  --marca-texto-oscuro: #8db4f0;
  --acento-texto-claro: #1d7a3a;
  --acento-texto-oscuro: #5fd08a;
  --radio: 16px;
  --radio-grande: 20px;
  --proporcion-foto: 1 / 1;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Neutros, modo claro. Tinta casi negra sobre blanco: precios legibles con sol directo. */
  --fondo: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f3f3f5;
  --superficie-3: #e8e8ec;
  --fondo-panel: #f3f3f5;
  --tinta: #121216;
  --tinta-2: #4a4a52;
  --tinta-3: #6a6a73;
  --linea: #e3e3e8;
  --linea-fuerte: #c9c9d1;
  --marca-texto: var(--marca-texto-claro);
  --acento-texto: var(--acento-texto-claro);
  --peligro: #b3261e;
  --aviso-fondo: #fff4d6;
  --aviso-tinta: #6b4500;
  --whatsapp: #0f7a3d;
  --sobre-whatsapp: #ffffff;
  --velo: rgba(10, 10, 14, 0.5);
  --sombra-hoja: 0 -8px 32px rgba(10, 10, 14, 0.14);
  --sombra-tarjeta: 0 1px 2px rgba(10, 10, 14, 0.04);
  color-scheme: light;

  /* Movimiento */
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);

  /* Espacios */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  /* Tipografía (escala 1.2) */
  --t-xs: 0.78rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.2rem;
  --t-xl: 1.44rem;
  --t-xxl: 1.73rem;

  --toque: 44px;
  --barra-inferior: 64px;
  --ancho: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #121214;
    --superficie: #1b1b1f;
    --superficie-2: #24242a;
    --superficie-3: #2e2e35;
    --fondo-panel: #121214;
    --tinta: #f5f5f7;
    --tinta-2: #c4c4cc;
    --tinta-3: #9c9ca6;
    --linea: #2c2c33;
    --linea-fuerte: #3d3d46;
    --marca-texto: var(--marca-texto-oscuro);
    --acento-texto: var(--acento-texto-oscuro);
    --peligro: #ff8a80;
    --aviso-fondo: #3a2c0b;
    --aviso-tinta: #ffd88a;
    --whatsapp: #0f7a3d;
    --velo: rgba(0, 0, 0, 0.62);
    --sombra-hoja: 0 -8px 32px rgba(0, 0, 0, 0.5);
    --sombra-tarjeta: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fondo: #121214;
  --superficie: #1b1b1f;
  --superficie-2: #24242a;
  --superficie-3: #2e2e35;
  --fondo-panel: #121214;
  --tinta: #f5f5f7;
  --tinta-2: #c4c4cc;
  --tinta-3: #9c9ca6;
  --linea: #2c2c33;
  --linea-fuerte: #3d3d46;
  --marca-texto: var(--marca-texto-oscuro);
  --acento-texto: var(--acento-texto-oscuro);
  --peligro: #ff8a80;
  --aviso-fondo: #3a2c0b;
  --aviso-tinta: #ffd88a;
  --whatsapp: #0f7a3d;
  --velo: rgba(0, 0, 0, 0.62);
  --sombra-hoja: 0 -8px 32px rgba(0, 0, 0, 0.5);
  --sombra-tarjeta: none;
  color-scheme: dark;
}

/* Sin animaciones cuando el sistema pide reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}