:root {
  --background: 42 38% 96%;
  --foreground: 222 46% 13%;
  --primary: 222 78% 48%;
  --secondary: 158 72% 38%;
  --muted: 42 24% 90%;
  --destructive: 0 76% 52%;
  --border: 220 18% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(222 46% 13% / 0.06);
  --shadow-md: 0 14px 40px hsl(222 46% 13% / 0.10);
  --shadow-lg: 0 22px 70px hsl(222 46% 13% / 0.16);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 222 42% 8%;
  --foreground: 42 32% 94%;
  --primary: 218 92% 66%;
  --secondary: 158 70% 48%;
  --muted: 222 28% 16%;
  --destructive: 0 78% 62%;
  --border: 222 24% 24%;
  --card: 222 35% 11%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.18);
  --shadow-md: 0 14px 40px hsl(0 0% 0% / 0.26);
  --shadow-lg: 0 22px 70px hsl(0 0% 0% / 0.36);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.16), transparent 34rem),
    radial-gradient(circle at top right, hsl(var(--secondary) / 0.14), transparent 30rem),
    hsl(var(--background));
}

button, input, select, textarea {
  font: inherit;
}

button:active {
  transform: scale(0.99);
}

::selection {
  background: hsl(var(--primary) / 0.22);
}

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

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

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