/*
 * Design tokens. Values are pasted from docs/specs/design-system.md (sections 2.2, 3.1, 3.2, 4.2 to 4.5).
 * Fonts are self-hosted: no request leaves the origin.
 */

@font-face {
	font-family: Archivo;
	src: url(../fonts/archivo-var-latin.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Archivo;
	src: url(../fonts/archivo-var-latin-italic.woff2) format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url(../fonts/jetbrains-mono-var-latin.woff2) format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks to limit layout shift (starting values from the design system). */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial");
	size-adjust: 97%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "JetBrains Mono Fallback";
	src: local("Courier New");
	size-adjust: 100%;
	ascent-override: 102%;
	descent-override: 30%;
	line-gap-override: 0%;
}

:root {

	/* Brand */
	--c-brand: #004e8f;
	--c-brand-hover: #003c70;
	--c-brand-active: #002f58;
	--c-brand-tint: #e5f0fa;
	--c-cyan: #3eb6e4;
	--c-cyan-hover: #6ccbef;
	--c-cyan-active: #2fa3d1;
	--c-cyan-text: #0b6a94;
	--c-cyan-tint: #e3f5fc;

	/* Neutrals */
	--c-paper: #fff;
	--c-surface: #f3f6fa;
	--c-surface-2: #e7edf4;
	--c-line: #d2dbe6;
	--c-control-border: #6b7f95;
	--c-ink: #0b1b2d;
	--c-ink-2: #3b4c60;
	--c-ink-3: #55667a;

	/* Night (dark sections) */
	--c-night-950: #06182a;
	--c-night-900: #0a2540;
	--c-night-800: #102f52;
	--c-night-line: #293848;
	--c-night-line-2: #1a2a3b;
	--c-on-night: #fff;
	--c-on-night-2: #b9cbdd;
	--c-on-night-3: #8fa6bd;
	--c-night-path: #1f5f86;

	/* Signal / semantic */
	--c-amber: #f5b301;
	--c-amber-tint: #fff4d1;
	--c-amber-ink: #7a4f00;
	--c-ok: #0f7b4a;
	--c-ok-tint: #e6f5ec;
	--c-err: #b42318;
	--c-err-tint: #fdecea;
	--c-err-on-night: #ff8a80;
	--c-ph: #d81b60;
	--c-ph-tint: #fff0f5;
	--c-ph-ink: #8f0f3f;

	/* Fibre jacket colour code (chips only) */
	--c-fibre-os: #f5b301;
	--c-fibre-om3: #3ec6d6;
	--c-fibre-om4: #0e8c9e;

	/* Roles */
	--c-text: var(--c-ink);
	--c-text-muted: var(--c-ink-2);
	--c-link: var(--c-brand);
	--c-link-hover: var(--c-brand-hover);
	--c-focus: #0b6a94;
	--c-focus-night: #3eb6e4;

	/* Typography */
	--font-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
	--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", menlo, consolas, monospace;
	--text-xs: clamp(0.75rem, 0.7292rem + 0.1042vw, 0.8125rem);
	--text-sm: clamp(0.8125rem, 0.7917rem + 0.1042vw, 0.875rem);
	--text-base: clamp(1rem, 0.9792rem + 0.1042vw, 1.0625rem);
	--text-md: clamp(1.0625rem, 1.0208rem + 0.2083vw, 1.1875rem);
	--text-lg: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem);
	--text-xl: clamp(1.375rem, 1.2917rem + 0.4167vw, 1.625rem);
	--text-2xl: clamp(1.625rem, 1.4583rem + 0.8333vw, 2.125rem);
	--text-3xl: clamp(1.875rem, 1.5833rem + 1.4583vw, 2.75rem);
	--text-4xl: clamp(2.25rem, 1.8333rem + 2.0833vw, 3.5rem);
	--text-5xl: clamp(2.5rem, 1.8333rem + 3.3333vw, 4.5rem);

	/* Container and grid */
	--container: 75rem;
	--container-wide: 82.5rem;
	--container-narrow: 46rem;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--grid-gap: clamp(1rem, 0.6rem + 1.9vw, 1.5rem);
	--prose-measure: 68ch;
	--header-h: 64px;
	--topbar-h: 40px;

	/* Spacing (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--section-y: clamp(3.5rem, 2.3333rem + 5.8333vw, 7rem);
	--section-y-sm: clamp(2.5rem, 1.8333rem + 3.3333vw, 4.5rem);

	/* Radii, borders, shadows */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-full: 999px;
	--border: 1px solid var(--c-line);
	--border-strong: 1px solid var(--c-control-border);
	--border-night: 1px solid var(--c-night-line);
	--rule-w: 1px;
	--shadow-1: 0 1px 2px rgba(6, 24, 42, 0.06), 0 1px 1px rgba(6, 24, 42, 0.04);
	--shadow-2: 0 4px 12px -2px rgba(6, 24, 42, 0.1), 0 2px 4px rgba(6, 24, 42, 0.06);
	--shadow-3: 0 16px 32px -8px rgba(6, 24, 42, 0.18), 0 4px 8px rgba(6, 24, 42, 0.08);

	/* z-index and motion */
	--z-base: 0;
	--z-header: 100;
	--z-menu: 110;
	--z-overlay: 190;
	--z-drawer: 200;
	--z-skip: 300;
	--dur-1: 120ms;
	--dur-2: 200ms;
	--dur-3: 320ms;
	--dur-4: 600ms;
	--dur-pulse: 4s;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Breakpoints (literal values, since custom properties cannot be used in media queries):
   sm 30rem (480px), md 48rem (768px), lg 64rem (1024px), xl 80rem (1280px). */

@media (min-width: 64rem) {

	:root {
		--header-h: 72px;
	}
}