/* ==========================================================================
   vars.css -- tokens del sistema. Familia Play / La Plata.
   ========================================================================== */

:root {
	--container: 1180px;
	--gutter: 24px;
	--gutter-sm: 16px;

	--z-header: 50;
	--z-burger-menu: 60;
	--z-cookie: 70;

	--color-bg: #F6F4FA;
	--color-ink: #292044;
	--color-coral: #FF6A5B;
	--color-amber: #FFB23E;
	--color-aqua: #2EC4B6;
	--color-surface: #FFFFFF;
	--color-surface-tint: #ECE8F6;
	--color-ink-soft: #5B5478;
	--color-line: #DAD4EC;

	--grad-warm: linear-gradient(135deg, #FF6A5B 0%, #FFB23E 100%);
	--grad-veil: linear-gradient(115deg, rgba(41, 32, 68, .92) 0%, rgba(41, 32, 68, .55) 46%, rgba(41, 32, 68, .08) 72%);

	--radius-lg: 32px;
	--radius-md: 20px;
	--radius-sm: 12px;
	--radius-pill: 999px;

	--shadow-soft: 0 20px 40px rgba(41, 32, 68, .14);
	--shadow-card: 0 12px 28px rgba(41, 32, 68, .10);

	--font-head: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Source Serif 4", Georgia, serif;

	--fs-h1: clamp(36px, 4.6vw + 8px, 66px);
	--fs-h2: clamp(28px, 2.6vw + 10px, 44px);
	--fs-h3: clamp(21px, 1.4vw + 10px, 28px);
	--fs-h4: clamp(18px, 0.6vw + 12px, 21px);
	--fs-lead: clamp(17px, 0.6vw + 14px, 20px);
	--fs-body: 17px;
	--fs-small: 15px;

	--ease-soft: cubic-bezier(.22, .68, .32, 1);
	--dur-fast: 160ms;
	--dur-med: 340ms;
}

/* TODO: revisar con el equipo si sumamos un tono ambar mas oscuro para hover en produccion. */