:root {
--color-bg-canvas: #f0f4f8;
--color-bg-surface-1: #ffffff;
--color-bg-surface-2: #f8fafc;
--color-bg-surface-3: #f1f5f9;
--color-fg-default: #0f172a;
--color-fg-muted: #64748b;
--color-fg-inverse: #ffffff;
--color-accent-50: #eff6ff;
--color-accent-100: #dbeafe;
--color-accent-200: #bfdbfe;
--color-accent-300: #93c5fd;
--color-accent-400: #60a5fa;
--color-accent-500: #3b82f6;
--color-accent-600: #2563eb;
--color-accent-700: #1d4ed8;
--color-accent-800: #1e40af;
--color-accent-900: #1e3a8a;
--color-border-subtle: #e2e8f0;
--color-border-default: #cbd5e1;
--color-border-strong: #94a3b8;
--color-status-success-fg: #15803d;
--color-status-success-bg: #f0fdf4;
--color-status-success-border: #86efac;
--color-status-warning-fg: #b45309;
--color-status-warning-bg: #fffbeb;
--color-status-warning-border: #fde68a;
--color-status-danger-fg: #b91c1c;
--color-status-danger-bg: #fef2f2;
--color-status-danger-border: #fca5a5;
--color-status-info-fg: #0369a1;
--color-status-info-bg: #f0f9ff;
--color-status-info-border: #7dd3fc;
--color-nav-bg: #1e293b;
--color-nav-fg: #f1f5f9;
--color-nav-hover: rgba(255,255,255,0.08);
--color-nav-active: rgba(59,130,246,0.15);
--typography-font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
--typography-font-family-serif: 'Georgia', serif;
--typography-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--typography-font-size-xs: 0.75rem;
--typography-font-size-sm: 0.875rem;
--typography-font-size-md: 1rem;
--typography-font-size-lg: 1.125rem;
--typography-font-size-xl: 1.25rem;
--typography-font-size-2xl: 1.5rem;
--typography-font-size-3xl: 1.875rem;
--typography-font-size-4xl: 2.25rem;
--typography-font-weight-regular: 400;
--typography-font-weight-medium: 500;
--typography-font-weight-semibold: 600;
--typography-font-weight-bold: 700;
--typography-line-height-tight: 1.25;
--typography-line-height-normal: 1.5;
--typography-line-height-relaxed: 1.75;
--typography-letter-spacing-tight: -0.025em;
--typography-letter-spacing-normal: 0em;
--typography-letter-spacing-wide: 0.025em;
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
--space-48: 192px;
--space-64: 256px;
--size-icon-sm: 16px;
--size-icon-md: 20px;
--size-icon-lg: 24px;
--size-control-sm: 28px;
--size-control-md: 36px;
--size-control-lg: 44px;
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--radius-full: 50%;
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
--motion-duration-fast: 120ms;
--motion-duration-base: 200ms;
--motion-duration-slow: 320ms;
--motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
--motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1);
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 1100;
--geometry-sidebar-width-collapsed: 64px;
--geometry-sidebar-width-expanded: 240px;
--geometry-topbar-height: 56px;
--geometry-content-max-width: 1280px;
--geometry-density-comfortable-row-height: 48px;
--geometry-density-compact-row-height: 36px;
--_comment: Comfortable density — default spacing, larger touch targets, relaxed row heights;
}