:root {
  --background: 216 33% 97%;
  --foreground: 222 28% 15%;
  --primary: 200 92% 42%;
  --secondary: 166 42% 78%;
  --muted: 210 28% 92%;
  --destructive: 2 78% 56%;
  --border: 214 25% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsla(222, 35%, 20%, 0.06);
  --shadow-md: 0 14px 34px hsla(206, 70%, 28%, 0.14);
  --shadow-lg: 0 20px 54px hsla(206, 70%, 28%, 0.18);
  --transition-fast: 120ms ease;
  --transition-smooth: 220ms ease;
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
}

.dark {
  --background: 220 27% 10%;
  --foreground: 210 25% 94%;
  --primary: 194 90% 58%;
  --secondary: 171 34% 27%;
  --muted: 220 20% 18%;
  --destructive: 3 79% 63%;
  --border: 219 16% 24%;
  --card: 221 22% 13%;
  --shadow-sm: 0 8px 22px hsla(220, 70%, 2%, 0.28);
  --shadow-md: 0 16px 40px hsla(200, 100%, 8%, 0.38);
  --shadow-lg: 0 24px 60px hsla(200, 100%, 8%, 0.48);
}

* {
  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: hsl(var(--background));
  color: hsl(var(--foreground));
}

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

input::placeholder,
textarea::placeholder {
  color: hsl(var(--foreground) / 0.45);
}

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

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