/**
 * @canaimashop/design-tokens
 * Generado desde tokens.json - no editar a mano.
 * Fuente: github.com/CanaimaDev/ven @ feature/ve-lote-11-virales
 * Extraído: 2026-07-13
 */

:root {
	/* Color: primary */
	--color-primary-50: #fffbf0;
	--color-primary-100: #ffedcc;
	--color-primary-200: #ffdf99;
	--color-primary-300: #FFD65C;
	--color-primary-400: #fcc930;
	--color-primary-500: #F4B000;
	--color-primary-600: #D99A00;
	--color-primary-700: #B88300;
	--color-primary-800: #8f6600;
	--color-primary-900: #664c00;
	--color-primary-950: #332600;

	/* Color: green / blue (secondary) */
	--color-green-50: #f0f7f4;
	--color-green-100: #e8f5e9;
	--color-green-300: #a5d6a7;
	--color-green-500: #4caf50;
	--color-green-700: #2e7d32;
	--color-blue-50: #f0f5fb;
	--color-blue-100: #e3f2fd;
	--color-blue-300: #64b5f6;
	--color-blue-500: #2196f3;
	--color-blue-700: #1565c0;

	/* Color: neutral */
	--color-neutral-0: #ffffff;
	--color-neutral-100: #f5f5f5;
	--color-neutral-200: #e0e0e0;
	--color-neutral-300: #E0E0E0;
	--color-neutral-500: #808080;
	--color-neutral-700: #3a3a3a;
	--color-neutral-900: #1a1a1a;

	/* Color: state */
	--color-success: #4caf50;
	--color-success-light: #e8f5e9;
	--color-warning: #FFB300;
	--color-warning-light: #fff3e0;
	--color-error: #E53935;
	--color-error-light: #ffebee;
	--color-info: #1E88E5;
	--color-info-light: #e3f2fd;

	/* Typography */
	--font-display: 'Poppins', sans-serif;
	--font-body: 'Dosis', sans-serif;
	--font-mono: 'Courier New', monospace;
	--font-size-12: 12px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-24: 24px;
	--font-size-28: 28px;
	--font-size-32: 32px;
	--font-size-40: 40px;
	--font-size-48: 48px;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--line-height-none: 1;
	--line-height-tight: 1.2;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;
	--letter-spacing-tighter: -0.05em;
	--letter-spacing-tight: -0.025em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.025em;
	--letter-spacing-wider: 0.05em;
	--letter-spacing-widest: 0.1em;
	--font-family-base: var(--font-display);
	--font-family-accent: var(--font-body);

	/* Space */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;

	/* Radius */
	--radius-default: 6px;
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-2xl: 16px;
	--radius-pill: 999px;
	--radius-full: 9999px;

	/* Shadow */
	--shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-2: 0px 2px 4px rgba(0, 0, 0, 0.12);
	--shadow-3: 0px 4px 8px rgba(0, 0, 0, 0.16);
	--shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.12);
	--shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.16);
	--shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.2);

	/* Motion */
	--motion-duration-fast: 150ms;
	--motion-duration-normal: 200ms;
	--motion-duration-slow: 250ms;
	--motion-easing-default: ease-out;
	--motion-easing-in: ease-in;
	--motion-easing-out: ease-out;
	--motion-easing-in-out: ease-in-out;
	--motion-easing-linear: linear;

	/* Z-index */
	--z-base: 1;
	--z-header: 500;
	--z-dropdown: 600;
	--z-skip-link: 900;
	--z-header-sticky: 1000;
	--z-overlay: 1100;
	--z-offcanvas: 1110;
	--z-modal: 1200;
	--z-toast: 1300;
	--z-tooltip: 1400;

	/* Breakpoints — solo informativos/legibles por JS: las custom
	   properties no funcionan dentro de @media (min-width: ...). */
	--bp-xs: 320px;
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
	--bp-2xl: 1536px;

	/* Country accents */
	--accent-ve: #4CAF50;
	--accent-mx: #E53935;
	--accent-co: #FFCA28;
	--accent-us: #1565C0;
	--accent-es: #546E7A;

	/* Semantic (--ds-*) */
	--ds-bg: var(--color-neutral-0, #FFFFFF);
	--ds-surface-1: var(--color-neutral-0, #FFFFFF);
	--ds-surface-2: var(--color-neutral-100, #F5F5F5);
	--ds-surface-3: var(--color-neutral-200, #E0E0E0);
	--ds-text: var(--color-neutral-900, #1A1A1A);
	--ds-text-muted: var(--color-neutral-700, #3A3A3A);
	--ds-border: var(--color-neutral-300, #D0D0D0);
	--ds-border-light: var(--color-neutral-100, #F5F5F5);
	--ds-overlay: rgba(0, 0, 0, 0.5);
	--ds-accent: var(--accent-current, #1565C0);
	--ds-accent-hover: var(--accent-current-hover, #0D47A1);
	--ds-accent-active: var(--accent-current-active, #0A3880);
	--ds-cta-primary-bg: var(--color-primary-500, #F4B000);
	--ds-cta-primary-hover: var(--color-primary-600, #D99A00);
	--ds-cta-primary-active: var(--color-primary-700, #B88300);
	--ds-cta-primary-text: var(--color-neutral-900, #1A1A1A);
	--ds-cta-secondary-bg: var(--ds-accent, #E53935);
	--ds-cta-secondary-hover: var(--ds-accent-hover, #0D47A1);
	--ds-cta-secondary-active: var(--ds-accent-active, #0A3880);
	--ds-cta-secondary-text: var(--accent-on-current, #FFFFFF);
	--ds-price: var(--color-neutral-900, #1A1A1A);
	--ds-price-compare: var(--color-neutral-500, #808080);
	--ds-badge-sale-bg: var(--color-error, #E53935);
	--ds-badge-sale-text: var(--color-neutral-0, #FFFFFF);
	--ds-badge-new-bg: var(--color-primary-500, #F4B000);
	--ds-badge-new-text: var(--color-neutral-900, #1A1A1A);
	--ds-badge-shipping-bg: var(--color-success, #4CAF50);
	--ds-badge-shipping-text: var(--color-neutral-0, #FFFFFF);
	--ds-badge-promo-bg: var(--color-info, #2196F3);
	--ds-badge-promo-text: var(--color-neutral-0, #FFFFFF);
	--ds-focus-ring-color: var(--color-primary-500, #F4B000);
	--ds-focus-ring-width: 2px;
	--ds-focus-ring-offset: 2px;
	--ds-success: var(--color-success, #4CAF50);
	--ds-warning: var(--color-warning, #FF9800);
	--ds-danger: var(--color-error, #E53935);
	--ds-info: var(--color-info, #2196F3);
	--ds-space-section: 40px;
	--ds-space-page: 48px;
	--ds-space-hero: 64px;

	/* Accessibility constants (agregado en el port — no existían
	   como custom properties en el tokens.css original, solo como
	   variables Sass de compilación). */
	--a11y-min-touch-target: 44px;
	--a11y-min-font-size-body: 14px;
}

/* Acento activo por mercado (fuente de verdad: html[data-market]) */
:root {
	--accent-current: var(--accent-us);
	--accent-current-hover: #0d47a1;
	--accent-current-active: #0a3880;
	--accent-on-current: #ffffff;
}

@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
	:root {
		--accent-current-hover: color-mix(in srgb, var(--accent-current) 88%, black 12%);
		--accent-current-active: color-mix(in srgb, var(--accent-current) 76%, black 24%);
	}
}

html[data-market="mx"] { --accent-current: var(--accent-mx); --accent-current-hover: #c62828; --accent-current-active: #b71c1c; }
html[data-market="us"] { --accent-current: var(--accent-us); --accent-current-hover: #0d47a1; --accent-current-active: #0a3880; }
html[data-market="ve"] { --accent-current: var(--accent-ve); --accent-current-hover: #2e7d32; --accent-current-active: #1b5e20; }
html[data-market="es"] { --accent-current: var(--accent-es); --accent-current-hover: #455a64; --accent-current-active: #37474f; }
html[data-market="co"] {
	--accent-current: var(--accent-co);
	--accent-current-hover: #f4b000;
	--accent-current-active: #d99a00;
	--accent-on-current: #1a1a1a;
}
html[data-market="mx"], html[data-market="us"], html[data-market="ve"], html[data-market="es"] {
	--accent-on-current: #ffffff;
}

/* Foco global (fuente única de verdad) */
:focus-visible {
	outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
	outline-offset: var(--ds-focus-ring-offset);
}

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

@media (prefers-contrast: more) {
	:root { --contrast-boost: 1.2; }
}

@media (prefers-color-scheme: dark) {
	:root { --color-scheme: dark; }
}

/* Dark mode — definido pero inactivo por defecto (ver tokens.json:
   darkMode.note). Descomentar el selector para activarlo. */
/*
[data-theme="dark"] {
	--dark-bg: #0d1117;
	--dark-surface: #161b22;
	--dark-surfaceHover: #1c2128;
	--dark-text: #e6edf3;
	--dark-textMuted: #7d8590;
	--dark-border: #30363d;
	--dark-borderMuted: #21262d;
	--dark-primary: #58a6ff;
	--dark-primaryHover: #1f6feb;
	--dark-secondary: #da3f7f;
	--dark-accent: #c9799a;
	--dark-success: #3fb950;
	--dark-warning: #d29922;
	--dark-error: #f85149;
	--dark-info: #58a6ff;
}
*/