/*
 * ============================================================
 * AZOVÉ PARFUMS — TOKENS DE DISEÑO (fuente única de verdad)
 * ============================================================
 *
 * Este archivo documenta y define TODOS los tokens del tema.
 * Ningún componente debe declarar colores, tamaños tipográficos,
 * espaciados ni duraciones fuera de estas variables.
 *
 * La paleta canónica vive en theme.json (presets de WordPress);
 * aquí se referencia con respaldo hexadecimal para contextos
 * donde los presets no existan.
 *
 * MODO DE COLOR
 * AZOVÉ es exclusivamente Dark Luxury: modo oscuro único.
 * No implementar modo claro ni `prefers-color-scheme`.
 *
 * REGLAS DE USO DEL COLOR (contraste WCAG 2.2 AA)
 * ┌───────────────────┬──────────────────────┬─────────┬─────────────────────────────┐
 * │ Texto             │ Sobre fondo          │ Ratio   │ Uso permitido               │
 * ├───────────────────┼──────────────────────┼─────────┼─────────────────────────────┤
 * │ --color-ivory     │ black / charcoal     │ ~17:1   │ Texto principal, títulos    │
 * │ --color-gold      │ black / charcoal     │ ~7.9:1  │ Acentos, precios, eyebrows  │
 * │ --color-black     │ gold (botón primario)│ ~7.9:1  │ Texto de botón primario     │
 * │ --color-smoke     │ SOLO --color-black   │ ~5.9:1  │ Texto secundario            │
 * │ --color-smoke     │ charcoal             │ ✗       │ PROHIBIDO: usar ivory-dim   │
 * │ --color-ivory-dim │ charcoal             │ ~9:1    │ Texto secundario en cards   │
 * └───────────────────┴──────────────────────┴─────────┴─────────────────────────────┘
 * El dorado se usa con moderación: acentos, nunca grandes superficies.
 *
 * MOVIMIENTO
 * Lento y sensorial. Solo se animan transform y opacity.
 * Toda animación debe desactivarse con prefers-reduced-motion
 * (regla global en base.css). IntersectionObserver se reserva
 * para el cambio del header y el reveal de secciones; las
 * animaciones cinematográficas llegarán encapsuladas en GSAP
 * (Fase 5) y solo en hero, reveals y familias olfativas.
 */

:root {
	/* ------------------------------------------------------------
	 * COLOR — paleta de marca (canónica en theme.json)
	 * ------------------------------------------------------------ */

	/* Negro profundo: fondo global del sitio. */
	--color-black: var(--wp--preset--color--azove-black, #0a0a0a);

	/* Carbón: superficies elevadas (tarjetas, paneles, footer bar). */
	--color-charcoal: var(--wp--preset--color--azove-charcoal, #171717);

	/* Marfil: texto principal y títulos. */
	--color-ivory: var(--wp--preset--color--azove-ivory, #f2ebdd);

	/* Dorado suave: acentos, CTA primario, foco, precios. Uso contenido. */
	--color-gold: var(--wp--preset--color--azove-gold, #b89a5e);

	/* Gris humo: texto secundario SOLO sobre --color-black. */
	--color-smoke: var(--wp--preset--color--azove-smoke, #8e8a82);

	/* ------------------------------------------------------------
	 * COLOR — derivados (calculados desde la paleta)
	 * ------------------------------------------------------------ */

	/* Texto secundario sobre carbón (sustituto de smoke en superficies). */
	--color-ivory-dim: color-mix(in srgb, var(--color-ivory) 78%, var(--color-black));

	/* Dorado iluminado: estado hover del CTA primario. */
	--color-gold-bright: color-mix(in srgb, var(--color-gold) 80%, var(--color-ivory));

	/* Superficie profunda: fondos de imagen/placeholder dentro de tarjetas. */
	--color-surface: color-mix(in srgb, var(--color-charcoal) 92%, var(--color-black));

	/* Líneas y bordes sutiles (14% marfil). */
	--color-line: color-mix(in srgb, var(--color-ivory) 14%, transparent);

	/* Líneas doradas de acento (35% dorado). */
	--color-line-gold: color-mix(in srgb, var(--color-gold) 35%, transparent);

	/* Velo oscuro para backdrops y overlays. */
	--color-overlay: rgba(10, 10, 10, 0.55);

	/* ------------------------------------------------------------
	 * TIPOGRAFÍA
	 * Display (Cormorant Garamond): títulos y momentos editoriales.
	 * Body (Manrope): interfaz, texto corrido, botones, formularios.
	 * Archivos woff2 autoalojados en assets/fonts/ (nunca CDN).
	 * ------------------------------------------------------------ */

	--font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Escala tipográfica fluida (mobile-first con clamp). */
	--text-xs: 0.75rem;        /* Badges, eyebrows, metadatos.            */
	--text-s: 0.875rem;        /* Botones, navegación, texto auxiliar.    */
	--text-m: 1rem;            /* Texto base.                             */
	--text-l: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* Lead, nombres de producto. */
	--text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);   /* h3, nombres de familia.    */
	--text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);    /* h2, títulos de sección.    */
	--text-display: clamp(2.5rem, 1.8rem + 3.6vw, 4.75rem); /* h1, título del hero.    */

	/* Tracking. */
	--tracking-wide: 0.08em;   /* Botones y navegación en mayúsculas.     */
	--tracking-caps: 0.28em;   /* Eyebrows y encabezados del footer.      */

	/* ------------------------------------------------------------
	 * ESPACIADO
	 * Escala fija para componentes; fluida para ritmos de página.
	 * ------------------------------------------------------------ */

	--space-2xs: 0.375rem;
	--space-xs: 0.625rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: 4rem;

	/* Respiración vertical entre secciones de página. */
	--space-section: clamp(4.5rem, 6vw + 2rem, 8rem);

	/* ------------------------------------------------------------
	 * FORMA
	 * Radios mínimos: el lujo de AZOVÉ es de aristas serenas.
	 * ------------------------------------------------------------ */

	--radius-s: 2px;           /* Botones, badges, inputs.                */
	--radius-m: 4px;           /* Tarjetas y paneles.                     */

	/* ------------------------------------------------------------
	 * MOVIMIENTO — lento, sensorial, nunca llamativo
	 * ------------------------------------------------------------ */

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 200ms;    /* Microinteracciones (hover de enlaces).  */
	--duration-base: 400ms;    /* Transiciones de componentes.            */
	--duration-slow: 800ms;    /* Fundidos cinematográficos (hero, media).*/

	/* ------------------------------------------------------------
	 * ESTRUCTURA
	 * ------------------------------------------------------------ */

	--container-max: 1200px;
	--container-pad: clamp(1.25rem, 4vw, 2.5rem);
	--header-height: 5rem;

	/* ------------------------------------------------------------
	 * CAPAS (z-index)
	 * ------------------------------------------------------------ */

	--z-header: 100;
	--z-nav-panel: 120;
	--z-skip-link: 200;

	/* ------------------------------------------------------------
	 * FOCO (WCAG 2.2: siempre visible, anillo dorado)
	 * ------------------------------------------------------------ */

	--focus-ring: 2px solid var(--color-gold);
	--focus-offset: 3px;
}