/* CSS Custom Properties */
:root {
	/* Colors - Background (depth hierarchy) */
	--color-bg: #101019;
	--color-bg-inset: #0c0c14;
	--color-bg-elevated: #181822;
	--color-bg-hover: #1e1e2a;
	--color-bg-subtle: #24243a;

	/* Colors - Border */
	--color-border: #2a2a3a;
	--color-border-light: #52525b;
	--color-border-dark: #1a1a26;

	/* Colors - Text */
	--color-text: #fafafa;
	--color-text-secondary: #e4e4e7;
	--color-text-muted: #a1a1aa;
	--color-text-subtle: #71717a;

	/* Colors - Primary */
	--color-primary: #818cf8;
	--color-primary-hover: #a5b4fc;
	--color-primary-light: #a5b4fc;

	/* Colors - Semantic */
	--color-success: #4ade80;
	--color-warning: #fbbf24;
	--color-error: #f87171;
	--color-info: #60a5fa;

	/* Colors - Special */
	--color-accent: #7afffa;
	--color-purple: #a855f7;
	--color-pink: #ec4899;
	--color-orange: #fb923c;
	--color-green: #22c55e;
	--color-blue: #3b82f6;
	--color-red: #ef4444;

	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);
	--shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);

	/* Font Families */
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-heading: "Space Grotesk", sans-serif;
	--font-mono: "Orbitron", monospace;

	/* Font Sizes */
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 14px;
	--text-md: 15px;
	--text-lg: 16px;
	--text-xl: 18px;
	--text-2xl: 20px;
	--text-3xl: 24px;

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Z-Index */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* Edge Mark - flat on anchored edge, rounded on free edge */
	--mark-size: 3px;
	--mark-radius: 3px;
	--mark-color: var(--color-primary);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 200ms ease-in-out;
	--transition-slow: 300ms ease-in-out;

	/* Breakpoints (for reference in media queries) */
	--breakpoint-xs: 480px;
	--breakpoint-sm: 768px;
	--breakpoint-md: 1000px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1200px;
}