/* ============================================================
   Design Tokens — Single source of truth
   ============================================================ */

:root {
	/* Primary */
	--color-primary: #4F46E5;
	--color-primary-hover: #4338CA;
	--color-primary-light: #EEF2FF;
	--color-primary-text: #ffffff;

	/* Semantic */
	--color-success: #10B981;
	--color-success-light: #D1FAE5;
	--color-error: #EF4444;
	--color-error-light: #FEE2E2;
	--color-warning: #F59E0B;
	--color-warning-light: #FEF3C7;
	--color-info: #3B82F6;
	--color-info-light: #DBEAFE;

	/* Surfaces */
	--color-bg: #F8FAFC;
	--color-surface: #FFFFFF;
	--color-text: #1E293B;
	--color-text-secondary: #64748B;
	--color-text-muted: #94A3B8;
	--color-border: #E2E8F0;
	--color-border-dark: #CBD5E1;

	/* Sidebar */
	--sidebar-bg: #1E293B;
	--sidebar-text: #CBD5E1;
	--sidebar-text-hover: #F8FAFC;
	--sidebar-active: rgba(79, 70, 229, 0.2);
	--sidebar-width: 240px;
	--sidebar-collapsed: 64px;

	/* Typography */
	--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--line-height: 1.5;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;

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

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Animation */
	--animation-fast: 150ms;
	--animation-normal: 300ms;
	--animation-slow: 500ms;

	/* Z-index */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;

	/* Transitions */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Dark Mode --- */
[data-theme="dark"] {
	--color-bg: #0F172A;
	--color-surface: #1E293B;
	--color-text: #F8FAFC;
	--color-text-secondary: #94A3B8;
	--color-text-muted: #64748B;
	--color-border: #334155;
	--color-border-dark: #475569;
	--color-primary-light: rgba(79, 70, 229, 0.15);

	--color-success-light: rgba(16, 185, 129, 0.15);
	--color-error-light: rgba(239, 68, 68, 0.15);
	--color-warning-light: rgba(245, 158, 11, 0.15);
	--color-info-light: rgba(59, 130, 246, 0.15);

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