/**
 * Design tokens — Valorix
 *
 * Primitivos derivados del logo real (azul marino->celeste, rojo oscuro->
 * brillante, grises cromados del wordmark) + tokens semánticos que los
 * consumen. Todo vive en :root — nunca en body — para evitar problemas de
 * herencia en componentes anidados (WooCommerce inyecta markup propio).
 */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* -----------------------------------------------------------
	 * Primitivos de color — gradiente azul (identidad "G" del logo)
	 * ----------------------------------------------------------- */
	--vx-blue-900: #0a1a4d;
	--vx-blue-800: #0f2670;
	--vx-blue-700: #143a9e;
	--vx-blue-600: #1f52c4;
	--vx-blue-500: #2f6fed;
	--vx-blue-400: #5c8ff2;
	--vx-blue-300: #8fb0f7;
	--vx-blue-100: #e4ecfd;

	/* Primitivos de color — gradiente rojo (identidad "V" del logo, CTAs) */
	--vx-red-900: #5c0e1c;
	--vx-red-800: #7c1226;
	--vx-red-700: #a11a30;
	--vx-red-600: #c71f37;
	--vx-red-500: #e5283f;
	--vx-red-400: #ef4b5e;
	--vx-red-300: #f57c89;
	--vx-red-100: #fde5e8;

	/* Primitivos de gris cromado (wordmark) — uso puntual, nunca en body text */
	--vx-chrome-100: #f4f5f7;
	--vx-chrome-200: #e3e5e9;
	--vx-chrome-300: #c7cbd1;
	--vx-chrome-400: #a8adb6;
	--vx-chrome-500: #8b909a;
	--vx-chrome-600: #6b7078;
	--vx-chrome-700: #4c4f56;

	/* -----------------------------------------------------------
	 * "Panel de instrumentos" — paleta técnica del rediseño de home.
	 * Uso restringido a propósito (ver comentarios en cada token); no son
	 * reemplazos genéricos de los primitivos de arriba.
	 * ----------------------------------------------------------- */
	--vx-ink: #1a1a1a; /* near-black editorial (Stitch "Obsidian & Ivory") — nunca negro puro */
	--vx-paper: #faf9f5; /* fondo de página, reemplaza los blancos puros */
	--vx-signal-blue: #2452ff; /* foco, scan-line del boot overlay, underline de producto en hover */
	--vx-signal-red: #e23b3b; /* SOLO precio de oferta y CTA primario de WhatsApp */
	--vx-line: rgba(14, 17, 22, 0.08); /* hairlines: divisores de sección, grid del catálogo */

	/* Gradientes de marca */
	--vx-gradient-blue: linear-gradient(135deg, var(--vx-blue-500) 0%, var(--vx-blue-900) 100%);
	--vx-gradient-red: linear-gradient(135deg, var(--vx-red-500) 0%, var(--vx-red-900) 100%);
	--vx-gradient-chrome: linear-gradient(135deg, var(--vx-chrome-100) 0%, var(--vx-chrome-500) 55%, var(--vx-chrome-300) 100%);
	--vx-gradient-hero: linear-gradient(160deg, var(--vx-blue-900) 0%, var(--vx-blue-700) 45%, var(--vx-red-800) 100%);

	/* -----------------------------------------------------------
	 * Tokens semánticos — lo único que deberían usar los componentes
	 * ----------------------------------------------------------- */
	--color-brand-primary: var(--vx-blue-700);
	--color-brand-primary-strong: var(--vx-blue-900);
	--color-brand-primary-soft: var(--vx-blue-100);
	/* Accent = CTA/atención en todo el theme; ahora vive en --vx-signal-red
	 * (antes var(--vx-red-500)) para que precio de oferta y CTA de WhatsApp
	 * usen el mismo rojo técnico del panel de instrumentos, sin duplicar
	 * el rol en un token nuevo. */
	--color-brand-accent: var(--vx-signal-red);
	--color-brand-accent-strong: var(--vx-red-800);
	--color-brand-accent-soft: var(--vx-red-100);

	--color-ink: var(--vx-ink);
	--color-ink-soft: #4b4f58;
	--color-ink-muted: #767b85;
	--color-surface: #ffffff;
	--color-surface-alt: #f6f7f9;
	/* Fondo unificado de todas las fotos de producto ("plinth" de showroom).
	 * Ligeramente cálido para separarse del fondo de página (--vx-paper); es
	 * el MISMO hex sobre el que se componen las fotos aisladas — si cambia
	 * acá, hay que regenerar las fotos. */
	--color-plinth: #eeede9;
	--color-surface-inverse: #0c1024;
	--color-border: #e4e6ea;
	--color-border-strong: #cfd2d8;
	/* Foco = mismo azul técnico del boot overlay y del underline de producto. */
	--color-focus: var(--vx-signal-blue);
	--color-success: #1f9d55;
	--color-danger: var(--vx-red-600);

	/* -----------------------------------------------------------
	 * Tipografía
	 * ----------------------------------------------------------- */
	--font-heading: 'Inter', 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--fs-900: clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
	--fs-800: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
	--fs-700: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--fs-600: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--fs-500: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--fs-400: 1rem;
	--fs-300: 0.875rem;
	--fs-200: 0.75rem;

	--lh-tight: 1.05;
	--lh-snug: 1.25;
	--lh-normal: 1.55;

	/* -----------------------------------------------------------
	 * Espaciado — escala modular de 8px
	 * ----------------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* -----------------------------------------------------------
	 * Layout, forma, movimiento
	 * ----------------------------------------------------------- */
	--container-max: 1440px;
	--container-pad: clamp(1.25rem, 4vw, 5rem);

	/* Shape language (Stitch "Spotlight Restructure"): tarjetas y contenedores
	 * de producto van rectos (0px) — la jerarquía la da el tamaño de imagen y
	 * tipografía, no el chrome. Los CTA y chips de categoría son la única
	 * excepción: en la pantalla real usan rounded-full (pill), no sharp. */
	--radius-sm: 0px;
	--radius-md: 0px;
	--radius-lg: 0px;
	--radius-pill: 999px;

	/* Elevación estrictamente flat — la jerarquía la dan tamaño y tipografía,
	 * nunca sombras. */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 600ms;

	--z-header: 100;
	--z-overlay: 200;
	--z-whatsapp: 150;
}