:root {
  --bg: #fff7f4;
  --bg-2: #ffe9e2;
  --card: #ffffff;
  --text: #2b1a17;
  --muted: #9a8a85;
  --border: #f0dcd5;
  --border-strong: #d9bfb6;
  --berry: #e63965;
  --berry-2: #ff7a4d;
  --berry-ink: #c22d55;
}

[data-theme="dark"] {
  --bg: #1a1113;
  --bg-2: #241417;
  --card: #251a1d;
  --text: #f6e9e6;
  --muted: #a98f8a;
  --border: #3a2a2d;
  --border-strong: #55393e;
  --berry: #ff5c85;
  --berry-2: #ff9a5c;
  --berry-ink: #ff8aa6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--bg-2), transparent 60%),
    radial-gradient(900px 400px at -10% 110%, var(--bg-2), transparent 55%),
    var(--bg);
  min-height: 100vh;
  transition: background 0.4s ease, color 0.3s ease;
}

.title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

input::placeholder { color: var(--muted); }
input:focus { border-color: var(--berry) !important; box-shadow: 0 0 0 3px rgba(230,57,101,0.12); }

.task-row { animation: slideIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.task-row:hover { border-color: var(--border-strong) !important; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.fade-up { animation: fadeUp 0.5s both cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Confetti */
.confetti-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden;
}
.confetti-bit {
  position: absolute; top: -30px;
  animation-name: fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

button { cursor: pointer; }