:root {
  --background: 222 47% 98%;
  --foreground: 224 30% 14%;
  --primary: 255 84% 62%;
  --secondary: 190 44% 92%;
  --muted: 220 20% 92%;
  --destructive: 6 78% 58%;
  --border: 222 20% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px hsla(240, 30%, 20%, 0.06);
  --shadow-md: 0 18px 40px hsla(246, 50%, 20%, 0.12);
  --shadow-lg: 0 28px 70px hsla(246, 50%, 18%, 0.18);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
}

.dark {
  --background: 228 24% 10%;
  --foreground: 210 30% 96%;
  --primary: 259 88% 68%;
  --secondary: 225 19% 20%;
  --muted: 226 15% 22%;
  --destructive: 8 84% 63%;
  --border: 226 15% 24%;
  --card: 228 22% 14%;
  --shadow-sm: 0 8px 22px hsla(0, 0%, 0%, 0.22);
  --shadow-md: 0 18px 40px hsla(0, 0%, 0%, 0.3);
  --shadow-lg: 0 30px 80px hsla(0, 0%, 0%, 0.42);
}

* {
  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:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.12), transparent 24%),
    radial-gradient(circle at top right, hsl(var(--secondary) / 0.9), transparent 20%),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
  color: hsl(var(--foreground));
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.glass {
  background: linear-gradient(180deg, hsl(var(--card) / 0.85), hsl(var(--card) / 0.72));
  backdrop-filter: blur(18px);
}

.task-item {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.task-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#root {
  animation: floatIn 500ms var(--transition-smooth);
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at top left, hsl(var(--primary) / 0.12), transparent 30%),
      linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
  }
}