:root {
  --mi-bg-base: #08080a;
  --mi-bg-elevated: #0f0f12;
  --mi-bg-surface: #16161a;
  --mi-bg-surface-hover: #1c1c22;
  --mi-bg-overlay: rgba(8, 8, 10, 0.72);
  --mi-border-subtle: rgba(255, 255, 255, 0.06);
  --mi-border-default: rgba(255, 255, 255, 0.1);
  --mi-text-primary: #f4f4f5;
  --mi-text-secondary: #a1a1aa;
  --mi-text-tertiary: #71717a;
  --mi-text-inverse: #08080a;
  --mi-accent-primary: #a78bfa;
  --mi-accent-secondary: #f472b6;
  --mi-accent-gradient: linear-gradient(to top, #164a2e 0%, #2d7a52 42%, #5eb8e8 100%);
  --mi-accent-glow: 0 0 40px rgba(94, 184, 232, 0.22);
  --mi-success: #34d399;
  --mi-warning: #fbbf24;
  --mi-error: #f87171;
  --mi-info: #60a5fa;
  --mi-space-1: 4px;
  --mi-space-2: 8px;
  --mi-space-3: 12px;
  --mi-space-4: 16px;
  --mi-space-5: 20px;
  --mi-space-6: 24px;
  --mi-space-8: 32px;
  --mi-space-10: 40px;
  --mi-space-12: 48px;
  --mi-space-16: 64px;
  --mi-space-20: 80px;
  --mi-radius-sm: 6px;
  --mi-radius-md: 12px;
  --mi-radius-lg: 16px;
  --mi-radius-xl: 24px;
  --mi-radius-2xl: 32px;
  --mi-radius-full: 9999px;
  --mi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --mi-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --mi-shadow-glow: 0 0 60px rgba(139, 92, 246, 0.15);
  --mi-blur-sm: 8px;
  --mi-blur-md: 24px;
  --mi-blur-lg: 48px;
  --mi-blur-xl: 80px;
  --mi-duration-instant: 80ms;
  --mi-duration-fast: 150ms;
  --mi-duration-normal: 250ms;
  --mi-duration-slow: 400ms;
  --mi-duration-count: 800ms;
  --mi-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --mi-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --mi-sidebar-width: 240px;
  --mi-sidebar-collapsed: 64px;
  --mi-bottom-nav-height: 56px;
  --mi-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --mi-font-body: "Inter", system-ui, sans-serif;
  --mi-font-mono: "JetBrains Mono", ui-monospace, monospace;
}