:root {
  --background: 210 60% 98%;
  --foreground: 220 32% 18%;
  --primary: 214 83% 58%;
  --secondary: 162 63% 53%;
  --muted: 216 18% 47%;
  --destructive: 0 72% 56%;
  --border: 214 28% 87%;
  --card: 210 40% 96%;

  --shadow-sm: 0 10px 30px hsla(214, 60%, 45%, 0.08);
  --shadow-md: 0 18px 40px hsla(214, 60%, 45%, 0.12);
  --shadow-lg: 0 24px 60px hsla(214, 60%, 45%, 0.18);

  --transition-fast: 120ms ease;
  --transition-smooth: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 222 39% 10%;
  --foreground: 210 40% 96%;
  --primary: 211 88% 64%;
  --secondary: 163 69% 49%;
  --muted: 215 20% 70%;
  --destructive: 0 72% 62%;
  --border: 217 24% 22%;
  --card: 222 28% 16%;

  --shadow-sm: 0 14px 28px hsla(222, 80%, 2%, 0.24);
  --shadow-md: 0 20px 40px hsla(222, 80%, 2%, 0.34);
  --shadow-lg: 0 28px 70px hsla(222, 80%, 2%, 0.42);
}

* {
  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;
}

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

input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted));
}

::selection {
  background: hsla(214, 83%, 58%, 0.18);
}

:focus-visible {
  outline: 2px solid hsla(214, 83%, 58%, 0.55);
  outline-offset: 2px;
}