/*
 * halfpap.io — design tokens.
 *
 * One calm-blue accent, three themes (Light / Dark / High-Contrast), all driven
 * purely by OS preferences — no JavaScript, no theme toggle. Light is the base
 * in :root; `prefers-color-scheme: dark` and `prefers-contrast: more` layer over
 * it. Self-hosted fonts only (no CDN at runtime).
 */

/* ---- Self-hosted fonts (woff2, latin subset, OFL-1.1) ------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

/* ---- Theme-independent tokens ------------------------------------------- */

:root {
	/* Type families */
	--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

	/* Fluid type scale (min .. max across 24rem .. 80rem viewport) */
	--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.91rem);
	--step-0: clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
	--step-1: clamp(1.20rem, 1.13rem + 0.36vw, 1.50rem);
	--step-2: clamp(1.44rem, 1.31rem + 0.64vw, 2.00rem);
	--step-3: clamp(1.73rem, 1.52rem + 1.05vw, 2.66rem);
	--step-4: clamp(2.07rem, 1.74rem + 1.66vw, 3.55rem);

	/* Spacing scale */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2.5rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* Geometry */
	--radius: 0.75rem;
	--radius-pill: 999px;
	--measure: 68ch;
	--container: 72rem;

	/* Motion (guarded by prefers-reduced-motion in base.css) */
	--transition: 200ms ease;

	/* ---- LIGHT theme (default) ---------------------------------------- */
	color-scheme: light dark;

	--bg: #f7f9fc;
	--surface: #ffffff;
	--surface-2: #eef2f8;
	--text: #11151c;
	--muted: #525a68;
	--accent: #1f5fd0;
	--accent-strong: #1a4fb0;
	--on-accent: #ffffff;
	--border: rgba(15, 23, 42, 0.12);
	--focus: #1f5fd0;

	/* Aurora glow (single blue hue, static) */
	--aurora-1: rgba(31, 95, 208, 0.16);
	--aurora-2: rgba(61, 90, 200, 0.10);
	--aurora-opacity: 1;
	--grain-opacity: 0;
}

/* ---- DARK theme --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0a0c10;
		--surface: #12151c;
		--surface-2: #181c25;
		--text: #e7eaf0;
		--muted: #9aa3b2;
		--accent: #6aa0ff;
		--accent-strong: #8ab4ff;
		--on-accent: #06080d;
		--border: rgba(255, 255, 255, 0.10);
		--focus: #8ab4ff;

		--aurora-1: rgba(58, 110, 230, 0.40);
		--aurora-2: rgba(40, 60, 170, 0.34);
		--aurora-opacity: 1;
		--grain-opacity: 0.5;
	}
}

/* ---- HIGH-CONTRAST theme (layers over light or dark) -------------------- */
@media (prefers-contrast: more) {
	:root {
		--bg: #ffffff;
		--surface: #ffffff;
		--surface-2: #ffffff;
		--text: #000000;
		--muted: #000000;
		--accent: #0b3aa0;
		--accent-strong: #082b78;
		--on-accent: #ffffff;
		--border: #000000;
		--focus: #0b3aa0;

		/* No aurora / grain in high-contrast — clarity over decoration. */
		--aurora-opacity: 0;
		--grain-opacity: 0;
	}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--surface: #000000;
		--surface-2: #000000;
		--text: #ffffff;
		--muted: #ffffff;
		--accent: #9bc1ff;
		--accent-strong: #c2d8ff;
		--on-accent: #000000;
		--border: #ffffff;
		--focus: #9bc1ff;
	}
}