:root {
  /* Accent Colors */
  --accent-50: #eff6ff;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-300: #93c5fd;
  --accent-400: #60a5fa;
  --accent-500: #3b82f6;
  --accent-600: #2563eb;
  --accent-700: #1d4ed8;
  --accent-800: #1e40af;
  --accent-900: #1e3a8a;
  --accent-950: #172554;

  /* Semantic Tokens - Light Mode */
  --surface-base: #ffffff;
  --surface-subtle: #f9fafb;
  --surface-elevated: #ffffff;
  --content-base: #111827;
  --content-muted: #4b5563;
  --content-subtle: #9ca3af;
  --border-base: #e5e7eb;
  --border-subtle: #f3f4f6;
}

:root.dark {
  /* Semantic Tokens - Dark Mode */
  --surface-base: #030712;
  --surface-subtle: #111827;
  --surface-elevated: #1f2937;
  --content-base: #f9fafb;
  --content-muted: #d1d5db;
  --content-subtle: #9ca3af;
  --border-base: #374151;
  --border-subtle: #1f2937;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

/* Loading state */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
}

/* Error state */
.error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: #dc2626;
  text-align: center;
  padding: 2rem;
}

/* Animations */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}