/**
 * Qivox design tokens.
 *
 * Single source of truth for brand colour, type scale, spacing and radii.
 * Page stylesheets (pages/{slug}/style.css) must consume these variables
 * instead of hardcoding values, so a brand tweak is a one-file change.
 */

:root {
	/* ---------- Brand ---------- */
	--qx-yellow: #ffbd00;
	--qx-yellow-600: #e0a600; /* hover / pressed on yellow surfaces */
	--qx-yellow-100: #fff4d1; /* tints, soft backgrounds on light */
	--qx-yellow-tint-dark: #3a2e0a; /* icon-badge tint on dark surfaces */

	/* ---------- Neutrals ---------- */
	--qx-black: #0a0a0a;
	--qx-ink: #111111; /* default dark surface */
	--qx-ink-800: #1c1c1c; /* raised dark surface / cards */
	--qx-ink-700: #2a2a2a; /* borders on dark */
	--qx-gray-500: #6f6f6f; /* muted text on light */
	--qx-gray-300: #b3b3b3; /* muted text on dark */
	--qx-gray-100: #ededed; /* borders on light */
	--qx-off-white: #f6f6f4;
	--qx-white: #ffffff;

	/* ---------- Semantic ---------- */
	--qx-bg: var(--qx-white);
	--qx-bg-alt: var(--qx-off-white);
	--qx-bg-dark: var(--qx-ink);
	--qx-text: var(--qx-ink);
	--qx-text-muted: var(--qx-gray-500);
	--qx-text-on-dark: var(--qx-white);
	--qx-text-muted-on-dark: var(--qx-gray-300);
	--qx-accent: var(--qx-yellow);
	--qx-border: var(--qx-gray-100);
	--qx-border-dark: var(--qx-ink-700);
	--qx-success: #16a34a; /* benefit checkmarks in pricing cards, not a brand accent */
	--qx-soon: #e5102e; /* "Próximamente" state chip on sede cards, not a brand accent */

	/* ---------- Typography ---------- */
	--qx-font: 'Graphik', 'Helvetica Neue', Arial, sans-serif; /* titles/subtitles only */
	--qx-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* everything else */

	--qx-fw-light: 300;
	--qx-fw-regular: 400;
	--qx-fw-medium: 500;
	--qx-fw-semibold: 600;
	--qx-fw-bold: 700;
	--qx-fw-black: 900;

	/* Fluid scale: min at 360px viewport, max at 1440px. */
	--qx-fs-display: clamp(2.75rem, 1.2rem + 6.8vw, 6rem); /* 44 → 96 */
	--qx-fs-h1: clamp(2.25rem, 1.2rem + 4.6vw, 4rem); /* 36 → 64 */
	--qx-fs-h2: clamp(1.75rem, 1.1rem + 2.9vw, 3rem); /* 28 → 48 */
	--qx-fs-h3: clamp(1.375rem, 1rem + 1.7vw, 2rem); /* 22 → 32 */
	--qx-fs-h4: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); /* 18 → 24 */
	--qx-fs-lead: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem); /* 17 → 20 */
	--qx-fs-body: 1rem;
	--qx-fs-small: 0.875rem;
	--qx-fs-eyebrow: 0.8125rem;

	--qx-lh-tight: 1;
	--qx-lh-heading: 1.08;
	--qx-lh-snug: 1.3;
	--qx-lh-body: 1.6;

	--qx-ls-display: -0.03em;
	--qx-ls-heading: -0.02em;
	--qx-ls-eyebrow: 0.14em;

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

	/* Vertical rhythm between full-width sections. */
	--qx-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* ---------- Layout ---------- */
	--qx-container: 1280px;
	--qx-container-narrow: 880px;
	--qx-container-wide: 1600px; /* card grids that need to breathe wider than content */
	--qx-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

	/* ---------- Radii & elevation ---------- */
	--qx-radius-sm: 6px;
	--qx-radius: 12px;
	--qx-radius-lg: 24px;
	--qx-radius-pill: 999px;

	--qx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.05);
	--qx-shadow: 0 8px 30px rgb(0 0 0 / 0.1);
	--qx-shadow-lg: 0 24px 60px rgb(0 0 0 / 0.16);
	--qx-shadow-header: 0 6px 9px -4px rgb(0 0 0 / 0.1);

	/* ---------- Header ---------- */
	--qx-header-pad-y: 20px;
	--qx-header-pad-x: clamp(1.25rem, 0.25rem + 4vw, 3.75rem); /* 20 → 60 */
	--qx-header-logo-w: 172px;
	--qx-header-nav-fs: 15px;

	/* ---------- Motion ---------- */
	--qx-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--qx-dur-fast: 150ms;
	--qx-dur: 250ms;
	--qx-dur-slow: 450ms;
}

/* Utility container used by every Qivox section. */
.qx-container {
	width: 100%;
	max-width: var(--qx-container);
	margin-inline: auto;
	padding-inline: var(--qx-gutter);
}

.qx-container--narrow {
	max-width: var(--qx-container-narrow);
}

.qx-container--wide {
	max-width: var(--qx-container-wide);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--qx-dur-fast: 1ms;
		--qx-dur: 1ms;
		--qx-dur-slow: 1ms;
	}
}