:root {
	/* === COLORES === */
	
	/* Color Principal - Azul Clorocien */
	--main-color: #12ace7;
	--main-color-rgb: 18,172,231;
	--main-color-contrast: #ffffff;
	--main-color-contrast-rgb: 255,255,255;
	--main-color-darker: #0b3041;
	--main-color-shade: #078dc1;
	--main-color-tint: #e7f8ff;
	--main-color-lighter: #5cc8f5;
	
	/* Color Secundario - Gris oscuro */
	--secondary-color: #111315;
	--secondary-color-rgb: 17,19,21;
	--secondary-color-contrast: #ffffff;
	--secondary-color-contrast-rgb: 255,255,255;
	--secondary-color-darker: #000000;
	--secondary-color-shade: #1b1f24;
	--secondary-color-tint: #2c3036;
	--secondary-color-lighter: #3f444a;
	
	/* Color de Acento */
	--accent-color: #12ace7;
	--accent-color-rgb: 18,172,231;
	--accent-color-contrast: #ffffff;
	--accent-color-contrast-rgb: 255,255,255;
	--accent-color-darker: #078dc1;
	--accent-color-shade: #0b3041;
	--accent-color-tint: #e7f8ff;
	--accent-color-lighter: #5cc8f5;
	
	/* Color de Éxito */
	--success-color: #20c16f;
	--success-color-rgb: 32,193,111;
	--success-color-contrast: #ffffff;
	--success-color-contrast-rgb: 255,255,255;
	--success-color-darker: #1a9d5a;
	--success-color-shade: #1ca85f;
	--success-color-tint: #3ec97f;
	--success-color-lighter: #5dd195;
	
	/* Color de Advertencia */
	--warning-color: #ffc409;
	--warning-color-rgb: 255,196,9;
	--warning-color-contrast: #000000;
	--warning-color-contrast-rgb: 0,0,0;
	--warning-color-darker: #cc9d07;
	--warning-color-shade: #e0ac08;
	--warning-color-tint: #ffca22;
	--warning-color-lighter: #ffd144;
	
	/* Color de Peligro */
	--danger-color: #c5000f;
	--danger-color-rgb: 197,0,15;
	--danger-color-contrast: #ffffff;
	--danger-color-contrast-rgb: 255,255,255;
	--danger-color-darker: #9f000c;
	--danger-color-shade: #ad000d;
	--danger-color-tint: #cb1a27;
	--danger-color-lighter: #f2463b;
	
	/* Colores Neutros */
	--light-color: #f4f7fa;
	--light-color-rgb: 244,247,250;
	--light-color-contrast: #111315;
	--light-color-contrast-rgb: 17,19,21;
	--light-color-darker: #d8e8f1;
	--light-color-shade: #eef4f8;
	--light-color-tint: #f8f9fb;
	--light-color-lighter: #ffffff;
	
	--medium-color: #6f7c87;
	--medium-color-rgb: 111,124,135;
	--medium-color-contrast: #ffffff;
	--medium-color-contrast-rgb: 255,255,255;
	--medium-color-darker: #5a6670;
	--medium-color-shade: #636f79;
	--medium-color-tint: #828e98;
	--medium-color-lighter: #95a6b3;
	
	--dark-color: #15181b;
	--dark-color-rgb: 21,24,27;
	--dark-color-contrast: #f4f8fb;
	--dark-color-contrast-rgb: 244,248,251;
	--dark-color-darker: #0b0d0f;
	--dark-color-shade: #121518;
	--dark-color-tint: #2a2e32;
	--dark-color-lighter: #3f4347;
	
	/* Color de Badge/Box */
	--box-color: var(--accent-color);
	
	/* === TIPOGRAFÍA === */
	--font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	
	/* Escala de texto */
	--text-xxs: 0.6rem;
	--text-xs: 0.7rem;
	--text-s: 0.8rem;
	--text-base: 0.9rem;
	--text-md: 1rem;
	--text-lg: 1.2rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 3rem;
	
	/* === ESPACIADO === */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	
	/* === BORDES === */
	--radius-xs: 2px;
	--radius-s: 4px;
	--radius-base: 8px;
	--radius-m: 12px;
	--radius-l: 16px;
	--radius-xl: 20px;
	--radius-full: 9999px;
	
	/* === SOMBRAS === */
	--shadow-sm: 0 2px 8px rgba(10, 42, 61, 0.08);
	--shadow: 0 10px 30px rgba(10, 42, 61, 0.12);
	--shadow-lg: 0 24px 60px rgba(10, 42, 61, 0.15);
	
	/* === LAYOUT === */
	--header-height: 76px;
	--header-total-height: 76px;
	--container-max: 1600px;
	
	/* === FOOTER === */
	--footer-color: #0aa9e6;
	--footer-color-menu-title: #fff;
	--footer-color-menu-item: #ccc;
	
	/* === TRANSICIONES === */
	--transition: 220ms ease;
	--transition-slow: 350ms ease;
	
	/* === OPACIDAD === */
	--rgba-opacity-f: 1;
	--rgba-opacity-mid-f: 0.75;
	--rgba-opacity-mid: 0.5;
	--rgba-opacity-mid-t: 0.25;
	--rgba-opacity-t: 0;

	/* === ALIASES COMPATIBILIDAD MAQUETACIÓN CLOROCIEN === */
	--brand: var(--main-color);
	--brand-deep: var(--main-color-shade);
	--brand-soft: var(--main-color-tint);
	--brand-strong: var(--main-color-darker);
	--accent: var(--secondary-color);
	--accent-soft: var(--secondary-color-tint);
	--background: var(--light-color);
	--surface: var(--light-color-shade);
	--surface-strong: var(--light-color-darker);
	--panel: #ffffff;
	--line: var(--light-color-darker);
	--text: var(--dark-color);
	--muted: var(--medium-color);
	--footer: var(--footer-color);
	--radius-lg: 2rem;
	--radius-md: 1.25rem;
	--container: min(100% - 1.5rem, 90rem);

	/* Forzar siempre el esquema de color claro */
	color-scheme: light;
}
@media (min-width: 768px) {
	:root {
		--container: min(100% - 2rem, 90rem);
    }
}
@media (min-width: 1440px) {
	:root {
		--container: min(100% - 2.5rem, 95rem);
	}
}
/* =========================================================================
   COMPATIBILIDAD FULLGLASS
   Variables que usan hojas heredadas del framework (favorites.css,
   snackbar.css, user.css) y que no forman parte del set de la maqueta.
   ========================================================================= */
:root {
	/* Info */
	--info-color: #3ba3f7;
	--info-color-rgb: 59,163,247;
	--info-color-contrast: #ffffff;
	--info-color-darker: #014470;
	--info-color-shade: #228ae6;

	/* Escala de texto heredada */
	--text-sm: var(--text-s);
	--space-s: 0.25rem;

	/* Duraciones */
	--duration-base: 1s;
	--duration-1: 0.1s;
	--duration-2: 0.25s;
	--duration-3: 0.5s;
	--duration-4: 0.75s;
	--duration-5: 1s;

	/* Panel de favoritos */
	--fav-drawer-width: 300px;
	--fav-drawer-height: 350px;
	--fav-cart-select-list-display: flex;

	/* Scrollbar del carrito lateral */
	--cart-content-scrollbar-bgcolor: rgba(0,0,0,0);
	--cart-content-scrollbar-color: var(--main-color);
	--cart-content-scrollbar-width: 0.35rem;
	--cart-content-scrollbar-radius: var(--radius-s);

	/* Toggle switch (selector carrito / favoritos) */
	--toggle-switch-selector-bg-color: var(--light-color-shade);
	--toggle-switch-selector-option-bg-color: transparent;
	--toggle-switch-selector-option-bg-color-hover: var(--light-color-darker);
	--toggle-switch-selector-option-bg-color-selected: var(--main-color);

	/* Countdown de ofertas */
	--countdown-background-color: var(--secondary-color);
	--countdown-line-color: var(--main-color);

	/* Sombras heredadas */
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

	/* Loader / normalizacion */
	--loader-color: var(--main-color);
	--color-company: var(--main-color);
	--color-company2: var(--secondary-color);
	--color-shadow: rgb(0 0 0 / 0.2);
	--line-height-block: 3rem;
	--header-z-index: 2500;
}