:root {
  --background: 210 40% 98%;
  --foreground: 222 28% 16%;
  --primary: 196 84% 42%;
  --secondary: 171 38% 78%;
  --muted: 210 26% 92%;
  --destructive: 0 74% 54%;
  --border: 214 24% 85%;
  --card: 0 0% 100%;

  --shadow-sm: 0 8px 24px hsla(208, 45%, 20%, 0.08);
  --shadow-md: 0 16px 40px hsla(208, 45%, 18%, 0.12);
  --shadow-lg: 0 24px 56px hsla(208, 45%, 16%, 0.18);

  --transition-fast: 120ms ease;
  --transition-smooth: 240ms ease;

  --radius-sm: 0.65rem;
  --radius-md: 0.95rem;
  --radius-lg: 1.35rem;
}

.dark {
  --background: 220 27% 10%;
  --foreground: 210 24% 94%;
  --primary: 191 90% 60%;
  --secondary: 171 28% 26%;
  --muted: 220 17% 18%;
  --destructive: 0 74% 62%;
  --border: 220 16% 24%;
  --card: 220 22% 14%;

  --shadow-sm: 0 10px 28px hsla(220, 60%, 2%, 0.28);
  --shadow-md: 0 18px 44px hsla(220, 60%, 2%, 0.36);
  --shadow-lg: 0 28px 68px hsla(220, 60%, 2%, 0.5);
}

* {
  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,
input,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.animate-pulse {
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}