/**
 * Design tokens. Change these to re-theme the entire site.
 */
:root {
	/* Colors */
	--color-bg: #05070d;
	--color-bg-alt: #090c16;
	--color-bg-elevated: #10152a;
	--color-bg-elevated-hover: #141a33;
	--color-border: rgba(255, 255, 255, 0.08);
	--color-border-strong: rgba(255, 255, 255, 0.16);
	--color-text: #eef1f8;
	--color-text-muted: #9aa3b8;
	--color-text-dim: #666f85;

	--color-accent: #3ea6ff;
	--color-accent-rgb: 62, 166, 255;
	--color-accent-2: #7c5cff;
	--color-accent-2-rgb: 124, 92, 255;
	--color-accent-contrast: #04101f;

	--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
	--gradient-bg-radial: radial-gradient(60% 60% at 80% 20%, rgba(124, 92, 255, 0.12) 0%, rgba(5, 7, 13, 0) 70%);

	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
	--shadow-glow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.25), 0 0 40px rgba(var(--color-accent-rgb), 0.18);
	--shadow-glow-strong: 0 0 0 1px rgba(var(--color-accent-rgb), 0.4), 0 0 60px rgba(var(--color-accent-rgb), 0.3);

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* Motion */
	--transition-fast: 150ms ease;
	--transition: 250ms ease;
	--transition-slow: 500ms cubic-bezier(0.16, 0.84, 0.44, 1);

	/* Layout */
	--container-width: 1240px;
	--container-padding: clamp(1.25rem, 4vw, 2.5rem);
	--header-height: 76px;

	/* Typography */
	--font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}