:root {
	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;

	/* Border Radius */
	--radius-sm: 2px;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;

	/* Colors - Light Theme */
	--color-link: #2563eb;
	--color-link-hover: #1d4ed8;
	--color-bg: #ffffff;
	--color-bg-alt: #f8fafc;
	--color-surface: #f1f5f9;
	--color-text: #1e293b;
	--color-text-muted: #64748b;
	--color-border: #e2e8f0;
	--color-error: #dc2626;
	--color-error-bg: #fee;
	--color-button: #334155;
	--color-button-hover: #475569;

	/* Typography */
	--font-family-brand: 'Nova Mono', monospace;
	--font-family-primary: 'Fira Code', monospace;
	--font-size-sm: 0.875rem;
	--font-size-xs: 0.7rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--line-height: 1.5;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);

	/* Breakpoints */
	/* the word refers to the size at which the device type begins */
	--brk-tablet: 675px;
	--brk-md-desktop: 1300px;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Colors - Dark Theme */
		--color-link: #3b82f6;
		--color-link-hover: #60a5fa;
		--color-bg: #04001f;
		--color-surface: #110a43;
		--color-bg-alt: #b33f62;
		--color-text: #ffdf61;
		--color-text-muted: #d1a700;
		--color-border: #537a5a;
		--color-error: #ef4444;
		--color-error-bg: #450a0a;
		--color-button: #b33f62;
		--color-button-hover: #b33f62;

		/* Shadows */
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
	}
}