/* ==========================================================================
   TOKENS DE DISEÑO
   Paleta y medidas tomadas del sistema "Industrial Synergy" del sitio actual.
   Cambiar un valor acá lo cambia en todo el sitio.
   ========================================================================== */

:root {
  /* --- Paleta de marca ------------------------------------------------- */
  /* Manual de marca CDC, pág. "Los colores":
     azul RGB 2,64,137 · amarillo RGB 255,204,0 */
  --color-primary: #024089;
  --color-primary-dark: #01305f;
  --color-primary-light: #0a55ab;

  --color-navy: #024089;        /* header y footer: el azul de marca */
  --color-navy-soft: #0a55ab;
  --color-navy-deep: #01305f;

  /* Grises secundarios del manual (RGB 61,61,60 y 44,44,44). */
  --color-gris: #3d3d3c;
  --color-gris-oscuro: #2c2c2c;

  --color-yellow: #ffcc00;      /* acento y CTAs */
  --color-yellow-dark: #e6b800;
  --color-green: #28a745;       /* confirmaciones y WhatsApp */

  /* Alias: conservan los nombres que usa el resto del CSS. */
  --color-primary-container: var(--color-primary);
  --color-on-primary-container: #90abff;
  --color-secondary: var(--color-yellow-dark);
  --color-secondary-container: var(--color-yellow);
  --color-on-secondary-container: var(--color-navy);
  --color-secondary-hover: var(--color-yellow-dark);
  --color-tertiary: var(--color-navy);
  --color-on-tertiary: #ffffff;

  /* --- Superficies ------------------------------------------------------ */
  --color-surface: #f7f9ff;
  --color-surface-muted: #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8f9fa;
  --color-surface-container: #eef1f5;
  --color-surface-variant: #e9ecef;

  --color-on-surface: #161c22;
  --color-on-surface-variant: #444651;
  --color-on-surface-faint: #747683;

  --color-outline-variant: #dee2e6;
  --color-outline-strong: #ced4da;

  /* --- Colores de categoría (manual de marca, pág. "Colores") -----------
     Se usan como acento de cada rubro. Los que no están en el manual heredan
     el azul de marca; se pueden definir por categoría desde el panel. */
  --cat-construccion: #b71928;
  --cat-pintura: #eb5c37;
  --cat-jardineria: #31895d;
  --cat-limpieza: #228293;

  /* --- Semánticos ------------------------------------------------------- */
  --color-success: var(--color-green);
  --color-error: #b3261e;
  --color-whatsapp: var(--color-green);
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;

  /* --- Overlays --------------------------------------------------------- */
  --alpha-outline: rgba(222, 226, 230, .6);
  --alpha-outline-strong: rgba(206, 212, 218, .9);
  --alpha-primary-soft: rgba(24, 60, 143, .05);
  --alpha-primary-10: rgba(24, 60, 143, .1);
  --alpha-white-10: rgba(255, 255, 255, .1);
  --alpha-white-20: rgba(255, 255, 255, .2);
  --alpha-white-60: rgba(255, 255, 255, .6);
  --alpha-white-80: rgba(255, 255, 255, .8);
  --alpha-black-50: rgba(0, 0, 0, .5);

  /* --- Tipografía ------------------------------------------------------- */
  /* Manual de marca: Roboto Condensed Bold Italic para títulos e información
     de tienda; Montserrat para los textos corridos. */
  --font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  --text-2xs: .625rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.5rem;
  --text-6xl: 3rem;

  /* --- Espaciado -------------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 5rem;

  /* --- Radios ----------------------------------------------------------- */
  /* El sitio de referencia usa esquinas marcadas: 4, 8 y 12 px. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* --- Sombras ---------------------------------------------------------- */
  --shadow-sm: 0 2px 4px rgba(12, 35, 64, .06);
  --shadow-md: 0 4px 8px rgba(12, 35, 64, .10);
  --shadow-lg: 0 8px 20px rgba(12, 35, 64, .12);
  --shadow-xl: 0 12px 32px rgba(12, 35, 64, .16);
  --shadow-2xl: 0 16px 40px rgba(12, 35, 64, .20);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 900px;
  --gutter: 24px;
  --navbar-height: 68px;
  --cart-width: 24rem;

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}