/*
 * Imaginuity 2025 redesign — design tokens (Figma "Imaginuity Website 2025", file OX6I9OC2wbPgDIJ3FeBG8k).
 * Values: .planning/figma-spec/*.md. Fluid sizes interpolate between 375 and 1440 px viewports, so
 * the 1440 artboard values are exact at desktop. Fonts are self-hosted by Astro (<Font />) and exposed
 * as --font-oswald / --font-manrope.
 */
:root {
	/* Colour */
	--c-ink: #0f1f29;
	--c-ink-90: rgb(15 31 41 / 0.9);
	--c-ink-75: rgb(15 31 41 / 0.75);
	--c-ink-50: rgb(15 31 41 / 0.5);
	--c-ink-35: rgb(15 31 41 / 0.35);
	--c-ink-15: rgb(15 31 41 / 0.15);
	--c-night: #0c1921; /* header bar, dark sections */
	--c-blue: #0046ff;
	--c-blue-hover: #0036c9;
	--c-mist: #eff7f9; /* "Who we help" band, testimonial panel */
	--c-panel: #f6f9f9; /* mega-menu panels, light cards */
	--c-magenta: #e90ae9;
	--c-cyan: #5ae8ff;
	--c-orange: #f7941d;
	--c-yellow: #ffd100;
	--c-lime: #d2fe01;
	--c-white: #fff;
	--c-white-75: rgb(255 255 255 / 0.75);
	--c-white-50: rgb(255 255 255 / 0.5);
	--c-white-20: rgb(255 255 255 / 0.2);
	--c-border: #d9d9d9;
	--c-overlay-hero: rgb(15 31 41 / 0.35);
	--c-overlay-dark: rgb(15 31 41 / 0.76);
	--c-panel-dark: rgb(15 31 41 / 0.36);
	--c-focus: var(--c-blue);
	--c-error: #c4002f;
	--c-error-on-dark: #ffd0d9;

	/* Type families */
	--font-display: var(--font-oswald), "Oswald", "Arial Narrow", Arial, sans-serif;
	--font-body: var(--font-manrope), "Manrope", Arial, Helvetica, sans-serif;

	/* Type scale: display (Oswald 500, uppercase) */
	--fs-display-xl: clamp(2.75rem, 1.606rem + 4.883vw, 6rem); /* 44 → 96 */
	--fs-display-l: clamp(2.5rem, 1.972rem + 2.254vw, 4rem); /* 40 → 64 */
	--fs-h2: clamp(1.875rem, 1.655rem + 0.939vw, 2.5rem); /* 30 → 40 */
	--fs-h3: clamp(1.625rem, 1.493rem + 0.563vw, 2rem); /* 26 → 32 */
	--fs-h4: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem); /* 22 → 28 */
	--fs-h5: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20 → 24 */
	--fs-h6: 1.125rem; /* 18 (nav size) */
	--lh-display: 0.98; /* 96/94 */
	--lh-heading: 1.1;
	--ls-display: -0.02em;
	--ls-heading: -0.03em;

	/* Type scale: body (Manrope) */
	--fs-lead: 1.125rem; /* 18 */
	--fs-body: 1rem; /* 16 */
	--fs-small: 0.875rem; /* 14 */
	--fs-label: 0.75rem; /* 12 */
	--fs-menu-heading: 1.25rem; /* 20 */
	--lh-body: 1.4375; /* 23/16 */
	--lh-relaxed: 1.625; /* 26/16 */
	--ls-body: -0.005em;
	--ls-caps: 0.15em; /* 2.4px @16, 1.92px @12 (Figma: 0.15–0.16em) */

	/* Layout */
	--container: 1340px;
	--container-narrow: 880px;
	--gutter: clamp(1.25rem, 0.546rem + 3.004vw, 3.125rem); /* 20 → 50 */
	--header-h: 110px;
	--header-h-mobile: 72px;

	/* Spacing (8px base; Figma section paddings land on 64–120) */
	--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;
	--section-y: clamp(3.5rem, 2.62rem + 3.756vw, 6rem); /* 56 → 96 */
	--section-y-tight: clamp(2.5rem, 1.94rem + 2.38vw, 4rem); /* 40 → 64 */
	--stack: 1.25rem; /* default flow gap in prose */

	/* Shape */
	--radius-pill: 9999px;
	--radius-0: 0;
	--rule: 1px solid var(--c-ink);
	--rule-light: 1px solid var(--c-white-50);
	--accent-rule: 4px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0ms;
	}
}