:root {
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --primary: #1976d2;
  --primary-foreground: #ffffff;
  --secondary: #9c27b0;
  --secondary-foreground: #ffffff;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --input: #ffffff;
  --ring: #1976d2;
  --radius: 0.5rem;
  --table-header: #f9fafb;
  --table-row-hover: #f5f5f5;
  --table-border: #e5e5e5;

  /* Text colors */
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-tertiary: #a3a3a3;

  /* Background colors */
  --background-primary: #ffffff;
  --background-secondary: #f5f5f5;
  --background-tertiary: #e5e5e5;

  /* Error colors */
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #dc2626;

  /* Warning colors */
  --warning-bg: #fffbeb;
  --warning-border: #fed7aa;
  --warning-text: #ea580c;

  /* Info colors */
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --info-text: #2563eb;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}

/* Dark theme styles */
.dark-theme {
  --background: #121212;
  --foreground: #e0e0e0;
  --card: #1e1e1e;
  --card-foreground: #e0e0e0;
  --primary: #2196f3;
  --primary-foreground: #ffffff;
  --secondary: #ba68c8;
  --secondary-foreground: #ffffff;
  --accent: #2a2a2a;
  --accent-foreground: #e0e0e0;
  --muted: #2a2a2a;
  --muted-foreground: #a0a0a0;
  --border: #404040;
  --input: #2a2a2a;
  --ring: #2196f3;
  --table-header: #1a1a1a;
  --table-row-hover: #2a2a2a;
  --table-border: #333333;

  /* Text colors */
  --text-primary: #e0e0e0;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;

  /* Background colors */
  --background-primary: #1e1e1e;
  --background-secondary: #2a2a2a;
  --background-tertiary: #333333;

  /* Error colors */
  --error-bg: #2a1515;
  --error-border: #7f1d1d;
  --error-text: #fca5a5;

  /* Warning colors */
  --warning-bg: #2a2010;
  --warning-border: #92400e;
  --warning-text: #fdba74;

  /* Info colors */
  --info-bg: #1e2a3a;
  --info-border: #1e3a8a;
  --info-text: #93c5fd;
}

/* Modern scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--accent);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Smooth transitions */
* {
  transition: all 0.2s ease;
}

/* Exclude tooltips and chart tooltips from transitions to prevent weird animations */
.MuiTooltip-tooltip,
.MuiTooltip-popper,
.MuiPopper-root,
[role='tooltip'],
[class*='ChartsTooltip'],
[class*='chartTooltip'],
[class*='tooltip']:not([class*='button']):not([class*='icon']) {
  transition: none !important;
}

/* 
  Note: MUI X Charts v8.6.0 has a known issue with invalid DOM property 'transform-origin'
  This is a library bug where they use 'transform-origin' instead of 'transformOrigin'
  The warning appears in development but doesn't affect functionality
  This should be fixed in a future version of @mui/x-charts
*/
