/* Tu Mercado · tienda v2 · tokens de diseño. Espaciado en múltiplos de 4 px; marca configurable (--verde, --naranja). */
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Marca (el panel puede sobrescribir estas dos) */
  --verde: #177a2c; --naranja: #ff7a1a;
  --verde-osc: color-mix(in srgb, var(--verde) 78%, #000);
  --verde-suave: color-mix(in srgb, var(--verde) 8%, #fff);
  --verde-medio: color-mix(in srgb, var(--verde) 20%, #fff);
  --naranja-suave: color-mix(in srgb, var(--naranja) 11%, #fff);
  /* Acción principal: el acento oscurecido hasta cumplir 4,5:1 con texto blanco */
  --cta: color-mix(in srgb, var(--naranja) 68%, #3d0508); --cta-osc: color-mix(in srgb, var(--cta) 84%, #000);
  --naranja-osc: color-mix(in srgb, var(--naranja) 45%, #3a0d0e);
  /* Neutros */
  --tinta: #0f1f1b; --tinta-2: #4b5d57; --linea: #dde6e3; --linea-fuerte: #b7c6c1;
  --fondo: #ffffff; --superficie: #fff; --sobre-color: #fff; --sobre-color-suave: #dff0ec;
  --error: #b3261e; --error-suave: #fbe9e7; --gris: #3b3b3b; --whatsapp: #0f7a3d;
  --brillo-1: #e6ecea; --brillo-2: #f3f6f5;
  /* Escala de espacio (4 px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  /* Forma y profundidad */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(15,31,27,.08);
  --sombra-2: 0 2px 4px rgba(15,31,27,.06), 0 8px 20px rgba(15,31,27,.08);
  --sombra-3: 0 4px 8px rgba(15,31,27,.08), 0 18px 40px rgba(15,31,27,.16);
  --foco: 0 0 0 3px color-mix(in srgb, var(--verde) 30%, transparent);
  /* Tipografía */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: clamp(1.75rem, 3vw, 2.5rem);
  --ease: cubic-bezier(.22,.8,.3,1);
  --ancho: 1480px; --alto-nav: 64px;
}