/**
 * Plásticos YJR — Sistema de diseño (variables globales)
 *
 * Fuente de verdad: .claude/context/project-description/DESCRIPTION.md
 *
 * Estrategia de color: se mantiene el contrato de variables heredable en
 * cascada de la plantilla (--accent-color, --heading-color, patrón
 * .light-background/.dark-background), alimentado con los tokens de marca,
 * igual que plantilla/assets/css/theme.css: acento por defecto = naranja
 * corporativo, títulos = azul principal, footer oscuro vía .dark-background.
 */

:root {
  /* ---- Marca: tokens canónicos ---- */
  --color-primary: #0F3563;
  --color-primary-hover: #0A2A4F;
  --color-secondary: #E86C30;
  --color-secondary-hover: #D35F26;
  --color-tertiary: #1D81B2;
  --color-tertiary-hover: #166894;

  /* ---- Neutros ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F7F9;
  --color-bg-alt-2: #EAF0F5;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-secondary: #5F6B76;
  --color-border: #D9E0E6;

  /* ---- Footer ---- */
  --color-footer-bg: #0B1F33;
  --color-footer-text: #FFFFFF;
  --color-footer-text-secondary: #C7D1DA;

  /* ---- Funcionales (solo para estados del sistema) ---- */
  --color-success: #198754;
  --color-warning: #F0AD00;
  --color-error: #D64545;
  --color-info: #1D81B2;
  --color-rating: var(--color-warning);

  /* ---- Espaciado, radios, sombras, transiciones ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  --shadow-sm: 0 2px 8px rgba(15, 53, 99, 0.08);
  --shadow-md: 0 4px 20px rgba(15, 53, 99, 0.1);
  --shadow-lg: 0 10px 40px rgba(15, 53, 99, 0.12);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* ---- Tipografía ----
   * Pesos recortados respecto a la plantilla original (que cargaba
   * 30+ variantes por familia) para reducir peso de red. */
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --heading-font: "Nunito", sans-serif;
  --nav-font: "Poppins", sans-serif;
}


/*
 * Tokens de marca adicionales tomados de plantilla/assets/css/theme.css.
 * Las variantes "-text" son versiones más oscuras de los acentos para usar
 * como color de TEXTO sobre fondos claros (contraste AA).
 */
:root {
  --color-accent: var(--color-secondary);
  --color-accent-text: #AE5124;
  --color-tertiary-text: #196E97;
  --color-surface-alt: var(--color-bg-alt-2);
}

/*
 * Alias de compatibilidad con el contrato de variables heredado de la
 * plantilla base (--accent-color, --heading-color, etc.), alimentado con
 * los tokens de marca. Igual que en plantilla/assets/css/theme.css, el
 * acento por defecto es el naranja corporativo; el footer (.dark-background)
 * y las secciones .light-background solo sobrescriben fondos/superficies.
 */
:root {
  --background-color: var(--color-bg);
  --default-color: var(--color-text);
  --heading-color: var(--color-primary);
  --accent-color: var(--color-accent);
  --surface-color: var(--color-bg-alt);
  --contrast-color: #FFFFFF;

  --nav-color: var(--color-text);
  --nav-hover-color: var(--color-accent);
  --nav-mobile-background-color: #FFFFFF;
  --nav-dropdown-background-color: #FFFFFF;
  --nav-dropdown-color: var(--color-text);
  --nav-dropdown-hover-color: var(--color-accent);

  scroll-behavior: smooth;
}

/* Preset "sección clara": fondo azulado suave y tarjetas blancas */
.light-background {
  --background-color: var(--color-bg-alt-2);
  --surface-color: #FFFFFF;
}

/* Preset "sección oscura" — lo usa el footer (ver footer.php) */
.dark-background {
  --background-color: var(--color-footer-bg);
  --default-color: var(--color-footer-text-secondary);
  --heading-color: var(--color-footer-text);
  --accent-color: var(--color-accent);
  --surface-color: #12283F;
  --contrast-color: #FFFFFF;
}

.old-price,
.original-price {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

/* Precios en naranja oscuro (mejor contraste sobre fondo claro) */
.current-price {
  color: var(--color-accent-text) !important;
}