/* tokens.css - Variables de diseño (plantilla MotoMejia).
   Tema oscuro premium. La identidad real llega desde config/sitio.json;
   assets/js/ui/theme.js puede sobrescribir las variables de marca en :root. */
:root {
  /* Paleta principal */
  --mm-primario: #ff9800;
  --mm-primario-claro: #ffc107;
  --mm-primario-oscuro: #e68900;
  --mm-oscuro: #0b0f14;
  --mm-superficie-oscura: #111821;
  --mm-acento: #38bdf8;

  /* Superficies (tema oscuro) */
  --mm-fondo: #0b0f14;
  --mm-fondo-2: #111821;
  --mm-superficie: #161e2a;
  --mm-superficie-hover: #1d2736;
  --mm-superficie-suave: #1a2230;

  /* Texto */
  --mm-texto: #f8fafc;
  --mm-texto-suave: #a8b3c2;

  /* Bordes */
  --mm-borde: rgba(255, 255, 255, 0.08);
  --mm-borde-fuerte: rgba(255, 255, 255, 0.18);

  /* Estados */
  --mm-exito: #22c55e;
  --mm-peligro: #ef4444;
  --mm-oferta: #ef4444;
  --mm-whatsapp: #25d366;
  --mm-whatsapp-hover: #1ebe5b;

  /* Derivados (sobre fondo oscuro) */
  --mm-texto-claro: #c9d4e0;
  --mm-texto-legal: #8a97a8;
  --mm-texto-navbar: #d8e1ea;
  --mm-texto-oscuro-fondo: #c9d4e0;
  --mm-texto-tenue: #8a97a8;
  --mm-texto-cabecera: #e2e8f0;
  --mm-esqueleto: #232c3a;

  /* Radios */
  --mm-radio-s: 10px;
  --mm-radio-m: 16px;
  --mm-radio-l: 24px;

  /* Sombras y glow */
  --mm-sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --mm-sombra-s: 0 3px 12px -2px rgba(0, 0, 0, 0.45);
  --mm-sombra-m: 0 20px 44px -16px rgba(0, 0, 0, 0.65);
  --mm-sombra-l: 0 40px 90px -24px rgba(0, 0, 0, 0.8);
  --mm-glow-primario: 0 0 0 1px rgba(255, 152, 0, 0.25), 0 10px 34px -8px rgba(255, 152, 0, 0.55);
  --mm-glow-suave: 0 0 26px -8px rgba(255, 152, 0, 0.4);
  --mm-anillo: rgba(255, 152, 0, 0.35);

  /* Movimiento */
  --mm-t-rapida: 0.15s;
  --mm-t-medio: 0.25s;
  --mm-t-suave: 0.5s;
  --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Contenedor y tipografía */
  --mm-contenedor: 1280px;
  --mm-fuente: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mm-fuente-titulo: "Poppins", "Inter", system-ui, sans-serif;
}