/* Armería Gil · tokens de diseño.
   Única fuente de colores, tipos, espacios y radios. Ningún otro CSS define hex sueltos.

   Paleta: monte bajo mediterráneo de la Vega Baja (sierra caliza, huerta, latón).
   encina  – verde casi negro: fondos oscuros, texto principal
   monte   – verde matorral: superficies secundarias oscuras, iconos
   laton   – latón de vaina: acción principal, detalles de valor
   piedra  – gris piedra caliza, ligeramente frío: fondo de página
   hueso   – superficies claras (tarjetas, formularios)
   chaleco – naranja de chaleco de caza: SOLO ofertas, contador del carrito y alertas */

:root {
  /* Solo tema claro: evita que el modo oscuro del móvil (Chrome, Samsung Internet) recoloree la web */
  color-scheme: only light;
  /* Color base */
  --encina-900: #141d17;
  --encina-800: #1e2b22;
  --encina-700: #283a2e;
  --monte-600: #3e5641;
  --monte-500: #56705a;
  --monte-300: #9fb2a0;
  --monte-100: #dfe6dc;
  --laton-700: #8a6c2f;
  --laton-600: #a4823f;
  --laton-500: #b8964f;
  --laton-300: #d9c393;
  --laton-100: #f2ead8;
  --piedra-200: #e8e8e1;
  --piedra-100: #f1f1ec;
  --hueso: #fbfbf8;
  --pizarra-600: #4a514c;
  --pizarra-500: #5e655f;
  --pizarra-400: #858b86;
  --linea: #d3d5cc;
  --linea-suave: #e3e4dd;
  --chaleco-600: #c9500f;
  --chaleco-500: #e2621b;
  --chaleco-100: #fbe6d8;
  /* Madera de culata: solo la mascota del asistente (Fusilito) */
  --madera-700: #6b4122;
  --madera-500: #a8693a;
  --madera-300: #d39a62;
  --mejilla: #e8907a;
  --acero-500: #6f7a78;
  --acero-300: #a9b3b0;

  /* Semánticos */
  --bg: #f1f2ef;          /* gris claro neutro: los productos y las tarjetas blancas resaltan */
  --surface: #ffffff;
  --surface-2: #f6f7f4;
  --text: var(--encina-800);
  --text-muted: var(--pizarra-500);
  --text-soft: var(--pizarra-400);
  --border: var(--linea);
  --border-soft: var(--linea-suave);
  --accent: var(--laton-500);
  --accent-strong: var(--laton-700);
  --accent-text: var(--encina-900);
  --sale: var(--chaleco-500);
  --sale-strong: var(--chaleco-600);
  --sale-bg: var(--chaleco-100);
  --ok: #3f7a4a;
  --ok-bg: #e2eedf;
  --warn: #9a6a12;
  --warn-bg: #f6ecd2;
  --danger: #a5352b;
  --danger-bg: #f6e0dc;
  --info: #3b5d73;
  --info-bg: #e0eaf0;
  --focus: var(--laton-500);

  /* Tipografía */
  /* Titulares: Archivo seminegrita y un punto ensanchada (la serif fina se leía mal en móvil). */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-display: 600;
  --wdth-display: 108;
  --ls-display: -0.02em;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.375rem;
  --fs-3xl: clamp(2.5rem, 5vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 7.2vw, 6rem);

  /* Espacio (escala de 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radios: pequeños y con jerarquía. Botones y campos 4px, tarjetas 6px, paneles 10px. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20, 29, 23, 0.06), 0 1px 1px rgba(20, 29, 23, 0.04);
  --shadow-2: 0 10px 30px -12px rgba(20, 29, 23, 0.28);
  --shadow-3: 0 24px 60px -20px rgba(20, 29, 23, 0.45);

  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@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;
  }
}