:root {
  --background: 228 32% 97%;
  --foreground: 230 26% 13%;
  --primary: 147 72% 52%;
  --secondary: 257 84% 66%;
  --muted: 230 22% 92%;
  --destructive: 2 84% 61%;
  --border: 228 20% 84%;
  --card: 0 0% 100%;

  --shadow-sm: 0 6px 18px hsl(229 30% 20% / 0.08);
  --shadow-md: 0 14px 34px hsl(229 34% 18% / 0.12);
  --shadow-lg: 0 22px 64px hsl(229 38% 14% / 0.18);

  --transition-fast: 140ms ease;
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
}

.dark {
  --background: 228 24% 8%;
  --foreground: 220 24% 94%;
  --primary: 147 76% 56%;
  --secondary: 261 88% 72%;
  --muted: 228 18% 16%;
  --destructive: 3 86% 64%;
  --border: 228 14% 22%;
  --card: 228 22% 11%;

  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.18);
  --shadow-md: 0 16px 40px hsl(0 0% 0% / 0.28);
  --shadow-lg: 0 24px 72px hsl(0 0% 0% / 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

button,
a {
  transition: all var(--transition-smooth);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--secondary) / 0.6);
}

::selection {
  background: hsl(var(--primary) / 0.28);
  color: hsl(var(--foreground));
}