/* Design tokens. Light theme, one accent, one radius rule. */

/*
 * One self-hosted variable face, latin subset only. Inter has an optical size
 * axis, so the same file covers tight display settings and readable body text.
 * The hierarchy comes from weight, size and tracking, not from a second family.
 */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-var.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Surfaces. Cool neutrals tied to the brand blue, never pure white on white. */
	--bg: #ffffff;
	--surface: #f6f8fc;
	--surface-2: #ffffff;
	--surface-3: #edf1f8;
	--line: #e1e7f1;
	--line-strong: #c7d2e3;

	/* Ink */
	--text: #080d18;
	--text-muted: #4b5670;
	--text-faint: #78839a;

	/* The single accent, carried from the existing brand. */
	--accent: #1356e3;
	--accent-hover: #0f47bd;
	--accent-ink: #0b3fae;
	--accent-soft: #edf3fe;
	--accent-line: #bed3fb;

	/* Status, only ever used for form feedback. */
	--success-ink: #14603c;
	--success-bg: #ecfaf2;
	--success-line: #b6e5cd;
	--caution: #8a4b00;
	--caution-bg: #fff6e8;
	--caution-line: #edc48a;
	--danger: #a3282d;
	--danger-bg: #fdf0f0;
	--danger-line: #f2c4c4;

	/* One deliberate dark block per page, used for the closing panel. */
	--ink: #080d18;
	--ink-2: #111a2e;
	--ink-line: #253048;
	--ink-text: #f2f5fa;
	--ink-muted: #97a3ba;

	/* Type */
	--font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-display: var(--font);
	--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

	/* Inter's optical size axis: 32 for display, 16 for text. */
	--opsz-display: 32;
	--opsz-text: 16;

	/* A wide scale, so headlines carry the page on size alone. */
	--step--2: clamp(0.75rem, 0.73rem + 0.09vw, 0.8rem);
	--step--1: clamp(0.84rem, 0.81rem + 0.13vw, 0.92rem);
	--step-0: clamp(1rem, 0.97rem + 0.17vw, 1.06rem);
	--step-1: clamp(1.16rem, 1.09rem + 0.32vw, 1.38rem);
	--step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
	--step-3: clamp(1.68rem, 1.4rem + 1.3vw, 2.5rem);
	--step-4: clamp(2.02rem, 1.53rem + 2.32vw, 3.5rem);
	--step-5: clamp(2.42rem, 1.63rem + 3.75vw, 4.85rem);
	--step-6: clamp(2.9rem, 1.72rem + 5.6vw, 6.3rem);

	/*
	 * A neutral grotesque only reads as confident at display sizes if the
	 * tracking is pulled in hard. These are the numbers the hierarchy rests on.
	 */
	--track-tight: -0.02em;
	--track-tighter: -0.032em;
	--track-display: -0.042em;
	--track-wide: 0.11em;

	/* Spacing */
	--space-2xs: 0.375rem;
	--space-xs: 0.625rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 4rem;
	--space-2xl: 6.75rem;
	--space-3xl: 8rem;

	/* Shape. Interactive controls are pills, surfaces are 14px. */
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* Shadows tinted to the brand hue, never neutral black. */
	--shadow-xs: 0 1px 2px rgba(8, 13, 24, 0.05);
	--shadow-sm: 0 2px 8px -2px rgba(8, 13, 24, 0.08);
	--shadow-md: 0 14px 32px -16px rgba(8, 13, 24, 0.22);
	--shadow-lg: 0 32px 64px -32px rgba(8, 13, 24, 0.3);
	--shadow-accent: 0 12px 28px -12px rgba(19, 86, 227, 0.45);

	/* Motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 150ms;
	--dur: 300ms;
	--dur-slow: 600ms;

	--container: 1240px;
	--container-narrow: 760px;

	--header-h: 70px;
}