/* ==========================================================================
   variables.css — Design tokens de El Señor Pique
   Paleta y tipografía del brief + escala de spacing/radius/sombras/motion.
   Cambiar la identidad de marca = cambiar aquí.
   ========================================================================== */

:root {
	/* ======================================================================
	   DESIGN SYSTEM — tokens oficiales (API pública del theme)
	   ====================================================================== */

	/* ---- Color ---- */
	--color-black: #111111;
	--color-dark: #1A1A1A;
	--color-red: #E22A23;
	--color-red-dark: #9F1515;
	--color-gold: #FFC62E;
	--color-green: #2DBA4F;
	--color-cream: #FFF6E6;
	--color-muted: #B8B8B8;

	/* ---- Typography ---- */
	--font-heading: 'Bebas Neue', 'Anton', 'Oswald', Impact, sans-serif;
	--font-body: 'Poppins', 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;

	/* ---- Layout ---- */
	--container-max: 1240px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-xl: 32px;

	/* ---- Shadows ---- */
	--shadow-red: 0 12px 34px rgba(226, 42, 35, 0.40);
	--shadow-gold: 0 12px 34px rgba(255, 198, 46, 0.32);
	--shadow-card: 0 18px 50px rgba(0, 0, 0, 0.50);

	/* ======================================================================
	   Alias internos --esp-* → tokens del design system (no romper templates)
	   ====================================================================== */
	/* ---- Colores de marca ---- */
	--esp-carbon: var(--color-black); /* Negro carbón */
	--esp-rojo: var(--color-red);     /* Rojo intenso */
	--esp-dorado: var(--color-gold);  /* Dorado */
	--esp-verde: var(--color-green);  /* Verde tropical */
	--esp-crema: var(--color-cream);  /* Blanco crema */
	--esp-gris: var(--color-dark);    /* Gris oscuro */

	/* ---- Superficies / derivados (tropical-noir cálido, no negro plano) ---- */
	--esp-bg: #0e0907;             /* carbón cálido con tinte marrón */
	--esp-ember: #3a0f0c;          /* oxblood/brasa para profundidad */
	--esp-ember-2: #240a07;
	--esp-surface: #1a120e;        /* superficies con calidez */
	--esp-surface-2: #20160f;
	--esp-surface-3: #2a1d15;
	--esp-border: rgba(255, 246, 230, 0.10);
	--esp-border-strong: rgba(255, 246, 230, 0.20);
	--esp-rojo-dark: var(--color-red-dark);
	--esp-dorado-dark: #e2a91f;

	/* Fondo del sitio: capas de luz cálida sobre carbón (da profundidad). */
	--esp-bg-grad:
		radial-gradient(140% 90% at 85% -10%, rgba(226, 42, 35, 0.16), transparent 55%),
		radial-gradient(120% 80% at 0% 100%, rgba(255, 198, 46, 0.07), transparent 55%),
		var(--esp-bg);

	/* ---- Texto ---- */
	--esp-text: var(--esp-crema);
	--esp-text-muted: rgba(255, 246, 230, 0.62);
	--esp-text-dim: rgba(255, 246, 230, 0.40);
	--esp-text-on-rojo: #fff;
	--esp-text-on-dorado: #1a1300;

	/* ---- Tipografía (alias del design system) ---- */
	--esp-font-display: var(--font-heading);
	--esp-font-body: var(--font-body);

	--esp-fs-300: 0.8125rem;
	--esp-fs-400: 0.9375rem;
	--esp-fs-500: 1.0625rem;
	--esp-fs-600: 1.5rem;
	--esp-fs-700: 2.1rem;
	--esp-fs-800: clamp(2.4rem, 5vw, 3.6rem);
	--esp-fs-900: clamp(3.4rem, 11vw, 9rem);   /* hero display — mucho más dramático */

	--esp-lh-tight: 0.86;
	--esp-lh-snug: 1.1;
	--esp-lh-body: 1.65;
	--esp-tracking-caps: 0.14em;   /* labels con más aire (vibe rótulo) */
	--esp-tracking-display: -0.01em;

	/* ---- Spacing (escala 4px) ---- */
	--esp-space-1: 0.25rem;
	--esp-space-2: 0.5rem;
	--esp-space-3: 0.75rem;
	--esp-space-4: 1rem;
	--esp-space-5: 1.5rem;
	--esp-space-6: 2rem;
	--esp-space-7: 3rem;
	--esp-space-8: 4rem;
	--esp-space-9: 6rem;

	/* ---- Layout ---- */
	--esp-maxw: 1280px;
	--esp-maxw-wide: 1480px;
	--esp-gutter: 1.25rem;
	--esp-header-h: 72px;

	/* ---- Radius ---- */
	--esp-radius-sm: var(--radius-sm);
	--esp-radius: var(--radius-md);
	--esp-radius-lg: var(--radius-lg);
	--esp-radius-pill: 999px;

	/* ---- Sombras / glow ---- */
	--esp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--esp-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
	--esp-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.55);
	--esp-glow-rojo: 0 8px 30px rgba(226, 42, 35, 0.35);
	--esp-glow-dorado: 0 8px 30px rgba(255, 198, 46, 0.30);

	/* ---- Motion ---- */
	--esp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--esp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--esp-ease-emph: cubic-bezier(0.2, 0, 0, 1);   /* "emphasized": entra firme, frena seco — confiado, sin bounce */
	--esp-dur-fast: 0.18s;
	--esp-dur: 0.32s;
	--esp-dur-slow: 0.6s;
	/* Interacción táctil (impeccable: feedback <150ms, decidido, sin elastic) */
	--esp-press: 90ms;          /* presión: rapidísima */
	--esp-press-ease: cubic-bezier(0.3, 0, 0.1, 1);

	/* ---- Z-index ---- */
	--esp-z-header: 100;
	--esp-z-drawer: 200;
	--esp-z-overlay: 300;
	--esp-z-bottomnav: 150;
}