/**
 * 00-variables.css — Variables CSS / Sistema de diseño
 *
 * Centraliza todos los valores reutilizables del sistema.
 * Cualquier cambio de color, tipografía o espaciado se hace aquí.
 * Debe cargarse primero — todos los demás snippets dependen de este.
 *
 * @package SideralJungle
 */

:root {
  /* Colores primarios */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f1f1f1;
  --color-gray-mid: #d9d9d9;
  --color-gray-dark: #888888;
  --color-gray-border: #e3e3e3;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-dark-card: #434242;

  /* Colores de acción */
  --color-cta-primary: #FEF7F7;
  --color-cta-hover: #0052a3;
  --color-atc-btn: #000000;

  /* Colores semánticos */
  --color-sale-bg: rgba(208, 80, 80, 1);
  --color-sale-text: #ffffff;
  --color-tag-green: rgb(17, 179, 65);
  --color-tag-sale-red: #de2121;
  --color-tag-promo-blue: rgb(173, 216, 230);
  --color-tag-variety: rgb(230 225 173);
  --color-gift-cta: #04a43a;
  --color-text-default: #333333;

  /* Tipografía */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Oswald', sans-serif;

  /* Bordes y radios */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-circle: 50%;

  /* Sombras */
  --shadow-soft: 0px 0px 8px 1px rgba(14, 0, 0, 0.42);
  --shadow-card: 0px 0px 4px 0px rgba(0, 0, 0, 0.54);
  --shadow-hover: 1px 2px 4px rgba(0, 0, 0, 0.4);

  /* Espaciado base */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 50px;

  /* Z-index system */
  --z-popup: 99;
  --z-popup-inner: 999;

  /* Assets
   * ⚠️ MANTENIMIENTO: actualizar solo aquí si cambia la imagen o ícono.
   */
  --asset-bg-pattern: url('/wp-content/plugins/sideral-jungle-wordpress/assets/img/magicpattern-grid-pattern-1782533292308.png');
  --asset-cart-icon: url('/develop/wp-content/uploads/2025/03/cart.svg');

  --color-primary: #e05a00;
  --color-secondary: #011128;

  --color-border-card-hover: #ffffff2d;
  --color-border-card: #ffffff11;
}
