:root {
  --background: 266 44% 8%;
  --foreground: 0 0% 98%;
  --primary: 286 92% 62%;
  --secondary: 250 36% 18%;
  --muted: 250 28% 16%;
  --muted-foreground: 250 20% 75%;
  --destructive: 0 84% 60%;
  --border: 262 38% 28%;
  --card: 264 42% 12%;
  --accent: 52 96% 58%;
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.32);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 266 44% 8%;
  --foreground: 0 0% 98%;
  --primary: 286 92% 62%;
  --secondary: 250 36% 18%;
  --muted: 250 28% 16%;
  --muted-foreground: 250 20% 75%;
  --destructive: 0 84% 60%;
  --border: 262 38% 28%;
  --card: 264 42% 12%;
}

* {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top, rgba(217, 70, 239, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.12), transparent 25%),
    hsl(var(--background));
}

canvas {
  display: block;
}

button, input {
  font: inherit;
}

button {
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-smooth);
}

button:active {
  transform: scale(0.97);
}

input::placeholder {
  color: hsla(var(--muted-foreground), 0.8);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}