:root {
	--color-background-primary: #ffffff;
	--color-background-secondary: #f9fafb;
	--color-background-tertiary: #f3f4f6;

	--color-background-success: #f0fdf4;
	--color-background-warning: #fffbeb;
	--color-background-info: #eff6ff;
	--color-background-danger: #fef2f2;

	--color-text-primary: #111827;
	--color-text-secondary: #6b7280;
	--color-text-tertiary: #9ca3af;

	--color-text-success: #15803d;
	--color-text-warning: #b45309;
	--color-text-info: #1d4ed8;
	--color-text-danger: #b91c1c;

	--color-border-tertiary: rgba(0, 0, 0, 0.1);
	--color-border-secondary: rgba(0, 0, 0, 0.25);
	--color-border-warning: #f59e0b;
	--color-border-success: #16a34a;

	--sidebar-width: 196px;
	--header-height: 60px;
	--bottom-nav-height: 64px;

	--border-radius-sm: 6px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-full: 9999px;

	--font-sans:
		"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
	--font-mono:
		ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.09), 0 4px 6px rgba(0, 0, 0, 0.05);

	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background-primary: #1c1c1e;
		--color-background-secondary: #2c2c2e;
		--color-background-tertiary: #111113;

		--color-background-success: #052e16;
		--color-background-warning: #1c1100;
		--color-background-info: #0d1f4e;
		--color-background-danger: #2d0a0a;

		--color-text-primary: #f5f5f5;
		--color-text-secondary: #a1a1aa;
		--color-text-tertiary: #71717a;

		--color-text-success: #4ade80;
		--color-text-warning: #fbbf24;
		--color-text-info: #60a5fa;
		--color-text-danger: #f87171;

		--color-border-tertiary: rgba(255, 255, 255, 0.1);
		--color-border-secondary: rgba(255, 255, 255, 0.22);
		--color-border-warning: #fbbf24;
		--color-border-success: #4ade80;

		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
	}
}