:root {
  --background: 36 45% 97%;
  --foreground: 231 28% 10%;
  --primary: 170 88% 39%;
  --secondary: 17 100% 61%;
  --muted: 36 28% 91%;
  --muted-foreground: 229 12% 42%;
  --destructive: 348 84% 52%;
  --border: 35 20% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(231 28% 10% / .08);
  --shadow-md: 0 14px 34px hsl(231 28% 10% / .12);
  --shadow-lg: 0 24px 70px hsl(231 28% 10% / .16);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 230 30% 7%;
  --foreground: 38 45% 96%;
  --primary: 170 82% 48%;
  --secondary: 19 100% 66%;
  --muted: 230 22% 14%;
  --muted-foreground: 226 14% 70%;
  --destructive: 348 88% 64%;
  --border: 229 18% 22%;
  --card: 230 26% 10%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / .22);
  --shadow-md: 0 14px 34px hsl(0 0% 0% / .30);
  --shadow-lg: 0 24px 70px hsl(0 0% 0% / .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / .18), transparent 34rem),
    radial-gradient(circle at bottom right, hsl(var(--secondary) / .16), transparent 30rem),
    hsl(var(--background));
}
button, input, a { transition: var(--transition-smooth); }
::selection { background: hsl(var(--primary) / .25); }
img { max-width: 100%; }