@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@400;700;900&display=swap");

:root {
	/* ─── Color Primitives ───────────────────────────────────*/
	--_blue-500: #3b82f6;
	--_blue-400: #60a5fa;
	--_blue-900a: rgba(59, 130, 246, 0.1);
	--_blue-800a: rgba(59, 130, 246, 0.2);
	--_blue-700a: rgba(59, 130, 246, 0.35);
	--_gray-400: #9ca3af;
	--_gray-500: #6b7280;
	--_red-500: #ef4444;
	--_red-900a: rgba(239, 68, 68, 0.15);
	--_white: #ffffff;
	--_black: #0a0a0a;
	--_zinc-900: #141414;
	--_zinc-800: #1e1e1e;
	--_zinc-700: #2a2a2a;
	--_white-0: rgba(255, 255, 255, 0);
	--_white-10: rgba(255, 255, 255, 0.1);
	--_white-60: rgba(255, 255, 255, 0.6);
	--_black-40: rgba(0, 0, 0, 0.4);
	--_black-70: rgba(0, 0, 0, 0.7);

	/* ─── Semantic Color Tokens ──────────────────────────────*/

	/* Brand */
	--color-primary: var(--_blue-500);
	--color-primary-focus: var(--_blue-400);
	--color-primary-dim: var(--_blue-900a);
	--color-primary-mid: var(--_blue-800a);
	--color-primary-glow: var(--_blue-700a);

	/* Feedback */
	--color-danger: var(--_red-500);
	--color-danger-dim: var(--_red-900a);

	/* Neutral */
	--color-secondary: var(--_gray-400);
	--color-muted: var(--_gray-500);

	/* Surface */
	--color-bg: var(--_black);
	--color-surface: var(--_zinc-900);
	--color-surface-raised: var(--_zinc-800);
	--color-border: var(--_zinc-700);

	/* Text */
	--color-text: var(--_white);
	--color-text-secondary: var(--_gray-400);
	--color-text-muted: var(--_gray-500);
	--color-text-inverse: var(--_black);

	/* Overlay */
	--color-overlay-light: var(--_white-10);
	--color-overlay-dark: var(--_black-40);
	--color-overlay-heavy: var(--_black-70);
	--color-scrim: linear-gradient(
		to top,
		var(--_black-70) 0%,
		rgba(0, 0, 0, 0.2) 55%,
		var(--_white-0) 100%
	);

	/* ─── Typography ─────────────────────────────────────────
   */
	--font-sans: "Geist Mono", monospace;
	--font-mono: "Geist Mono", monospace;

	/* Scale (desktop-first) */
	--text-2xs: 0.625rem; /* 10px */
	--text-xs: 0.75rem; /* 12px */
	--text-sm: 0.875rem; /* 14px */
	--text-base: 1rem; /* 16px */
	--text-lg: 1.125rem; /* 18px */
	--text-xl: 1.25rem; /* 20px */
	--text-2xl: 1.5rem; /* 24px */
	--text-3xl: 1.875rem; /* 30px */
	--text-4xl: 2.25rem; /* 36px */
	--text-5xl: 3rem; /* 48px */
	--text-6xl: 3.75rem; /* 60px */
	--text-7xl: 4.5rem; /* 72px */
	--text-8xl: 6rem; /* 96px */
	--text-hero: clamp(3.5rem, 6.5vw, 9rem);

	/* Weight */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;
	--weight-black: 900;

	/* Leading */
	--leading-none: 1;
	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--leading-loose: 1.75;

	/* Tracking */
	--tracking-tighter: -0.04em;
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.05em;
	--tracking-wider: 0.08em;
	--tracking-widest: 0.12em;

	/* ─── Spacing ─────────────────────────────────────────── */
	--space-1: 0.25rem; /*  4px */
	--space-2: 0.5rem; /*  8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */
	--space-24: 6rem; /* 96px */
	--space-32: 8rem; /* 128px */

	/* ─── Radii ───────────────────────────────────────────── */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 28px;
	--radius-full: 9999px;

	/* ─── Shadows ─────────────────────────────────────────── */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
	--shadow-primary: 0 0 0 3px var(--color-primary-mid);
	--shadow-primary-lg: 0 8px 32px var(--color-primary-glow);

	/* ─── Motion ──────────────────────────────────────────── */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	--duration-instant: 80ms;
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
	--duration-slower: 600ms;

	/* ─── Touch / Interaction Targets ────────────────────── */
	--touch-target: 44px; /* WCAG 2.5.5 minimum */

	/* ─── Layout ──────────────────────────────────────────── */
	--container-max: 1200px;
	--nav-height: 68px;
	--nav-offset: 88px; /* nav-height + top gap */
}