/* ============================================================
   404 · Design tokens
   Single source of truth for colour, type, space, motion.
   ============================================================ */

:root {
	/* Surfaces */
	--bg: #090A0B;
	--bg-soft: #101214;
	--surface: #15181A;
	--surface-hover: #1B1F22;

	/* Text */
	--text: #F1F0EA;
	--text-muted: #939A96;
	--text-faint: #7E857F;
	--text-ghost: #666D69; /* pure decoration only (never for readable text) */

	/* Lines */
	--line: rgba(241, 240, 234, 0.12);
	--line-strong: rgba(241, 240, 234, 0.22);
	--grid: rgba(241, 240, 234, 0.04); /* decorative background grid — much dimmer than borders */

	/* Accent + technical status colours */
	--accent: #D8FF3E;
	--accent-hover: #C7EC33;
	--accent-ink: #121500;

	--blue: #90B7FF;
	--warning: #F6C860;
	--danger: #FF8A80;

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Layout */
	--container: 1440px;
	--gutter: clamp(16px, 4vw, 40px);

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

	/* Section rhythm */
	--section-y: clamp(56px, 9vw, 120px);

	/* Typography */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--fs-eyebrow: 0.72rem;
	--fs-small: 0.82rem;
	--fs-body: 1rem;
	--fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
	--fs-h3: clamp(1.15rem, 2vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 4vw, 2.75rem);
	--fs-h1: clamp(2.5rem, 6vw, 4rem);

	/* Motion */
	--t-fast: 120ms;
	--t: 220ms;
	--t-slow: 420ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.28, 0.44, 1); /* soft overshoot — Framer-style settle */

	/* Elevation (used sparingly on a dark UI) */
	--shadow-1: 0 1px 0 rgba(255, 255, 255, 0.02), 0 12px 40px -24px rgba(0, 0, 0, 0.8);
	--shadow-accent: 0 8px 30px -12px rgba(216, 255, 62, 0.28);

	/* Z-index scale */
	--z-header: 100;
	--z-overlay: 200;
	--z-panel: 210;
	--z-search: 300;

	/* Header height */
	--header-h: 68px;
}