/* ============================================================
   VARIABLES.CSS — Sistema de diseño global Avasol
   ============================================================
   Aquí viven TODAS las decisiones de diseño globales.
   Si quieres cambiar el color principal, solo cambias aquí.
   Cualquier otro CSS del child theme debe usar var(--avasol-*)
   en lugar de hardcodear colores.
   ============================================================ */

:root {

  /* ===== PALETA PRINCIPAL ===== */

  /* Naranja: color de acción (botones, CTAs, destacados) */
  --avasol-orange: #FF6A00;
  --avasol-orange-dark: #E55A00;      /* hover de botones */
  --avasol-orange-light: #FFF4EB;     /* fondos suaves, pills, badges */

  /* Azul marino: color de confianza (headers, títulos, footer) */
  --avasol-navy: #003366;
  --avasol-navy-dark: #002244;        /* hover de links navy */
  --avasol-navy-light: #E6ECF2;       /* fondos suaves */

  /* Verde: reservado SOLO para urea automotriz y "múltiplos de" */
  --avasol-green: #28A745;
  --avasol-green-dark: #1E7A36;
  --avasol-green-light: #E8F5EC;

  /* Azul info: textos de "La unidad te sale a S/" */
  --avasol-blue-info: #2563EB;

  /* ===== ESCALA DE GRISES ===== */
  --avasol-white: #FFFFFF;
  --avasol-gray-50: #FAFAF7;          /* fondo de secciones alternas */
  --avasol-gray-100: #F9FAFB;         /* fondo de imágenes producto */
  --avasol-gray-200: #ECECEC;         /* bordes suaves */
  --avasol-gray-300: #D1D5DB;
  --avasol-gray-400: #9CA3AF;         /* texto secundario, marca uppercase */
  --avasol-gray-500: #6B7280;         /* texto descriptivo */
  --avasol-gray-700: #374151;
  --avasol-gray-900: #1F2937;         /* texto principal alternativo a navy */

  /* ===== TIPOGRAFÍA ===== */
  --avasol-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica */
  --avasol-text-xs: 11px;
  --avasol-text-sm: 13px;
  --avasol-text-base: 15px;
  --avasol-text-lg: 18px;
  --avasol-text-xl: 22px;
  --avasol-text-2xl: 28px;
  --avasol-text-3xl: 32px;

  /* Pesos */
  --avasol-font-normal: 400;
  --avasol-font-medium: 500;
  --avasol-font-semibold: 600;
  --avasol-font-bold: 700;

  /* ===== ESPACIADOS ===== */
  --avasol-space-xs: 4px;
  --avasol-space-sm: 8px;
  --avasol-space-md: 16px;
  --avasol-space-lg: 24px;
  --avasol-space-xl: 32px;
  --avasol-space-2xl: 48px;

  /* ===== BORDES Y RADIOS ===== */
  --avasol-radius-sm: 4px;
  --avasol-radius-md: 6px;
  --avasol-radius-lg: 8px;
  --avasol-radius-xl: 12px;
  --avasol-radius-pill: 999px;

  --avasol-border: 1px solid var(--avasol-gray-200);
  --avasol-border-strong: 1.5px solid var(--avasol-orange);

  /* ===== SOMBRAS ===== */
  --avasol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --avasol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --avasol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

  /* ===== TRANSICIONES ===== */
  --avasol-transition-fast: 0.15s ease;
  --avasol-transition-base: 0.25s ease;

  /* ===== Z-INDEX (capas) ===== */
  --avasol-z-header: 100;
  --avasol-z-sticky: 1001;
  --avasol-z-modal: 9999;

}

/* ============================================================
   SOBREESCRITURA DE VARIABLES DE BLOCKSY
   ============================================================
   Blocksy usa --theme-palette-color-N como variables.
   Las redirigimos a nuestras variables Avasol para que TODO
   el tema padre adopte automáticamente la nueva paleta.
   ============================================================ */

:root {
  --theme-palette-color-1: var(--avasol-orange);     /* Color primario Blocksy → naranja */
  --theme-palette-color-2: var(--avasol-orange-dark); /* Color hover */
  --theme-palette-color-3: var(--avasol-navy);        /* Texto principal → azul marino */
  --theme-palette-color-4: var(--avasol-gray-500);    /* Texto secundario */
  --theme-palette-color-5: var(--avasol-gray-200);    /* Bordes */
  --theme-palette-color-6: var(--avasol-white);       /* Fondo */
  --theme-palette-color-7: var(--avasol-gray-50);     /* Fondo alternativo */
  --theme-palette-color-8: var(--avasol-navy-light);
}