:root {
  --background: 222 47% 7%;
  --foreground: 190 35% 94%;
  --primary: 174 92% 45%;
  --secondary: 263 82% 66%;
  --muted: 215 18% 68%;
  --destructive: 0 82% 63%;
  --border: 210 28% 20%;
  --card: 222 42% 11%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .30);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, .42);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: .75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 190 35% 94%;
  --primary: 174 92% 45%;
  --secondary: 263 82% 66%;
  --muted: 215 18% 68%;
  --destructive: 0 82% 63%;
  --border: 210 28% 20%;
  --card: 222 42% 11%;
}

* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
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 15% 10%, hsl(var(--primary) / .18), transparent 25rem), radial-gradient(circle at 85% 5%, hsl(var(--secondary) / .18), transparent 24rem), hsl(var(--background)); color: hsl(var(--foreground)); }
button, a { transition: var(--transition-smooth); }
input, select, textarea { font-size: max(16px, 1rem); }
.focus-ring:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }