/* KNVI Labs design tokens. Palette is provisional: swap values here only. */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-var.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Color */
	--navy: #101D3A;
	--blue: #246BFD;
	--blue-hover: #1F5FE0; /* --blue darkened ~8% */
	--blue-ink: var(--blue-hover); /* small blue text: AA on white, neutral and blue-light */
	--sky: #65B9F5;
	--blue-light: #EAF4FF;
	--neutral: #F7F9FC;
	--white: #FFFFFF;
	--slate: #526078;
	--border: #E4EAF2;
	--red: #E65B5B;
	--redact: #F1F4F8;   /* redaction pill background */

	/* Sky fails 3:1 non-text contrast on white, so focus uses blue (WCAG 2.2 AA 1.4.11). */
	--focus-ring: var(--blue);

	--navy-rgb: 16, 29, 58;
	--blue-rgb: 36, 107, 253;
	--red-rgb: 230, 91, 91;

	/* Type families */
	--font-heading: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Type scale: fluid between 480px (mobile value) and 1440px (desktop value) */
	--fs-h1: clamp(2.75rem, 1.5rem + 4.1667vw, 5.25rem);          /* 44 → 84 */
	--fs-h2: clamp(2.125rem, 1.5625rem + 1.875vw, 3.25rem);       /* 34 → 52 */
	--fs-h3: clamp(1.5rem, 1.375rem + 0.4167vw, 1.75rem);         /* 24 → 28 */
	--fs-h4: clamp(1.125rem, 1.0625rem + 0.2083vw, 1.25rem);      /* 18 → 20 */
	--fs-stat: clamp(2.125rem, 1.75rem + 1.25vw, 2.875rem);      /* 34 → 46 stat numerals */
	--fs-statement: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);      /* 28 → 40 approach statement */
	--fs-panel: clamp(1.5rem, 1.3125rem + 0.625vw, 1.875rem);     /* 24 → 30 lifecycle panel headline */
	--fs-body-lg: clamp(1.0625rem, 1.03125rem + 0.1042vw, 1.125rem); /* 17 → 18 */
	--fs-body: 1rem;        /* 16 */
	--fs-nav: 0.9375rem;    /* 15 */
	--fs-proof: 0.875rem;   /* 14 */
	--fs-label: 0.8125rem;  /* 13 */
	--fs-eyebrow: 0.75rem;  /* 12 */
	--fs-micro: 0.6875rem;  /* 11 */

	--lh-h1: 1.02; /* brief says 0.94, but descenders (g) collide with ascenders (f) in Manrope */
	--lh-h2: 1.05;
	--lh-h3: 1.2;
	--lh-body-lg: 1.6;
	--lh-body: 1.65;

	--tracking-h1: -0.03em;
	--tracking-h2: -0.02em;
	--tracking-eyebrow: 0.14em;
	--measure: 58ch;

	/* Spacing scale */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 128px;

	/* Layout */
	--container: 1240px;
	--gutter: clamp(20px, 3.2vw, 40px);
	--col-gap: clamp(16px, 2vw, 24px);
	--header-h: 80px;
	--header-h-compact: 64px;
	--section-y: clamp(56px, 3rem + 5vw, 128px);
	--section-y-tight: 64px;

	/* Shape */
	--radius-card: 14px;
	--radius-panel: 14px;
	--radius-feature: 20px;
	--radius-btn: 12px;
	--radius-field: 12px;

	/* Elevation */
	--shadow-panel: 0 12px 32px rgba(var(--navy-rgb), 0.08);
	--shadow-card-hover: 0 12px 28px rgba(var(--navy-rgb), 0.08);
	--shadow-btn-hover: 0 6px 16px rgba(var(--blue-rgb), 0.24);
	--shadow-feature: 0 16px 40px rgba(var(--navy-rgb), 0.08);
	--shadow-play: 0 6px 16px rgba(var(--blue-rgb), 0.24);
	--shadow-surface: 0 24px 48px rgba(var(--navy-rgb), 0.10), 0 2px 6px rgba(var(--navy-rgb), 0.05);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 200ms;
	--dur-base: 240ms;
	--dur-reveal: 400ms;
	--reveal-rise: 12px;
	--stagger: 80ms;
}