:root {
  --background: 214 45% 98%;
  --foreground: 224 24% 14%;
  --primary: 258 86% 58%;
  --secondary: 188 72% 48%;
  --muted: 220 25% 93%;
  --destructive: 0 76% 56%;
  --border: 223 22% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsla(244, 70%, 18%, 0.08);
  --shadow-md: 0 18px 40px hsla(244, 70%, 18%, 0.12);
  --shadow-lg: 0 24px 64px hsla(258, 86%, 45%, 0.2);
  --transition-fast: all 140ms ease;
  --transition-smooth: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 228 27% 8%;
  --foreground: 210 20% 95%;
  --primary: 263 92% 68%;
  --secondary: 188 78% 58%;
  --muted: 226 18% 16%;
  --destructive: 0 72% 62%;
  --border: 225 14% 22%;
  --card: 228 24% 11%;
  --shadow-sm: 0 8px 24px hsla(240, 80%, 4%, 0.35);
  --shadow-md: 0 18px 40px hsla(240, 80%, 4%, 0.42);
  --shadow-lg: 0 24px 64px hsla(263, 92%, 40%, 0.32);
}

* {
  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: var(--transition-smooth);
}

textarea {
  resize: vertical;
}

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

@media (max-width: 640px) {
  body {
    padding-bottom: 72px;
  }
}