:root {
  --background: 42 45% 96%;
  --foreground: 216 34% 14%;
  --primary: 174 73% 31%;
  --secondary: 32 95% 62%;
  --muted: 216 14% 43%;
  --destructive: 356 72% 48%;
  --border: 42 24% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(216 34% 14% / 0.08);
  --shadow-md: 0 14px 34px hsl(216 34% 14% / 0.12);
  --shadow-lg: 0 24px 70px hsl(216 34% 14% / 0.16);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.45rem;
}

.dark {
  --background: 214 36% 9%;
  --foreground: 38 38% 94%;
  --primary: 172 64% 47%;
  --secondary: 31 90% 58%;
  --muted: 214 15% 70%;
  --destructive: 356 78% 62%;
  --border: 214 22% 22%;
  --card: 214 32% 13%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / 0.22), transparent 34rem),
    radial-gradient(circle at 85% 10%, hsl(var(--primary) / 0.18), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button, a, input, textarea { transition: var(--transition-smooth); }
input, textarea { font-size: max(16px, 1rem); }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid hsl(var(--secondary) / 0.72);
  outline-offset: 2px;
}
::selection { background: hsl(var(--primary) / 0.25); }