:root {
  --background: 222 47% 98%;
  --foreground: 222 47% 11%;
  --primary: 197 89% 42%;
  --secondary: 198 37% 94%;
  --secondary-strong: 214 84% 64%;
  --muted: 214 32% 92%;
  --muted-foreground: 217 17% 40%;
  --destructive: 0 78% 56%;
  --warning: 35 92% 52%;
  --success: 152 66% 36%;
  --border: 214 30% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px -20px hsla(222, 47%, 11%, 0.22);
  --shadow-md: 0 18px 50px -24px hsla(222, 47%, 11%, 0.28);
  --shadow-lg: 0 28px 70px -30px hsla(222, 47%, 11%, 0.36);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 222 35% 9%;
  --foreground: 210 40% 96%;
  --primary: 191 90% 58%;
  --secondary: 222 27% 15%;
  --secondary-strong: 217 91% 60%;
  --muted: 222 24% 16%;
  --muted-foreground: 215 20% 70%;
  --destructive: 0 80% 62%;
  --warning: 35 92% 58%;
  --success: 152 66% 44%;
  --border: 222 20% 22%;
  --card: 222 30% 12%;
}

* {
  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 {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

pre,
code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

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