/* --- 1. TOKENS --- */
:root {
	/* Colours */
	--cyan: #00c8e6;
	--cyan-dim: rgba(0, 200, 230, 0.12);
	--cyan-glow: rgba(0, 200, 230, 0.4);
	--black: #06060a;
	--dark: #0d0d12;
	--card-bg: #131318;
	--card: #111117;
	--border: rgba(255, 255, 255, 0.07);
	--text-white: #f0f0f2;
	--text-gray: #777;
	--error: #ff4444;
	--error-soft: #ff7777;

	/* Typography */
	--font-display: 'Bebas Neue', -apple-system, sans-serif;
	--font-body: 'Open Sans', -apple-system, sans-serif;
	--font-condensed: var(--font-body);

	/* Spacing */
	--page-pad-x: 6%;
	--section-pad-y: 80px;
	/* Fixed navbar total height: logo block 50px + 18px×2 padding + 1px border */
	--navbar-height: 88px;
	/* Top clearance for page content so it always sits below the fixed navbar */
	--page-top-clear: calc(var(--navbar-height) + 40px);

	/* Motion */
	--transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}