:root {
  --bg: 0 0% 98%;
  --surface: 0 0% 100%;
  --border: 0 0% 90%;
  --fg: 0 0% 9%;
  --muted: 0 0% 40%;
  --primary: 22 100% 50%;
  --primary-hover: 22 100% 45%;
  --primary-fg: 0 0% 100%;
  --danger: 0 84% 60%;
  --success: 142 71% 45%;
}

html.dark {
  --bg: 0 0% 4%;
  --surface: 0 0% 9%;
  --border: 0 0% 15%;
  --fg: 0 0% 98%;
  --muted: 0 0% 60%;
  --primary: 22 100% 50%;
  --primary-hover: 22 100% 55%;
  --primary-fg: 0 0% 100%;
  --danger: 0 84% 60%;
  --success: 142 71% 45%;
}

body {
  background-color: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted));
}

/* Custom Animations */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes toastSlide {
  0% { opacity: 0; transform: translateX(100%); }
  10% { opacity: 1; transform: translateX(0); }
  90% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100%); }
}

.animate-slide-up { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

.toast-notification {
  animation: toastSlide 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sticky Card Stacking (Landing Page) */
.stack-card {
  position: sticky;
  top: 100px;
  transform-origin: center top;
}

/* Loader */
.skeleton-loader {
  background: linear-gradient(90deg, hsl(var(--surface)) 25%, hsl(var(--border)) 50%, hsl(var(--surface)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hide chart axis lines for cleaner look */
canvas {
  max-height: 400px;
}