/* ===== Themes via CSS variables ===== */
:root,
[data-theme="dawn"] {
  --bg-0: #f4ede0;
  --bg-1: #efe4d2;
  --bg-glow: rgba(232, 161, 61, 0.18);
  --bg-glow-2: rgba(164, 99, 232, 0.12);
  --surface: #fffaf0;
  --surface-border: #e3d4b8;
  --ink: #2c2318;
  --accent: #b5651d;
  --accent-soft: #e8a13d;
  --check-border: #c9b28a;
  --check-on-bg: #4bb391;
  --danger: #c0433d;
  --shadow: rgba(90, 66, 30, 0.12);
}

[data-theme="midnight"] {
  --bg-0: #12100f;
  --bg-1: #1a1614;
  --bg-glow: rgba(232, 161, 61, 0.10);
  --bg-glow-2: rgba(120, 90, 220, 0.14);
  --surface: #201b18;
  --surface-border: #3a3129;
  --ink: #f2e9db;
  --accent: #e8a13d;
  --accent-soft: #f0b95e;
  --check-border: #55483b;
  --check-on-bg: #4bb391;
  --danger: #e06a63;
  --shadow: rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-0);
  color: var(--ink);
  transition: background 0.4s ease, color 0.4s ease;
}

.page-bg {
  background:
    radial-gradient(1000px 500px at 12% -8%, var(--bg-glow), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--bg-glow-2), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  min-height: 100vh;
  transition: background 0.4s ease;
}

/* ===== Typography ===== */
.display-font { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }
.body-text { font-family: "Newsreader", Georgia, serif; color: var(--ink); }
.subtitle { font-family: "Newsreader", serif; font-style: italic; }
.mono { font-family: "JetBrains Mono", monospace; color: var(--ink); }

/* ===== Surfaces ===== */
.card-surface {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
.shadow-soft { box-shadow: 0 6px 24px -10px var(--shadow); }

/* ===== Composer ===== */
.composer:focus-within {
  border-color: var(--accent-soft);
  box-shadow: 0 8px 30px -12px var(--shadow), 0 0 0 3px var(--bg-glow);
}
.composer textarea { color: var(--ink); font-family: "Newsreader", serif; }

.add-btn {
  background: var(--accent);
  color: #fff8ef;
  border: none;
}
.add-btn:not(:disabled):hover { background: var(--accent-soft); }

/* ===== Todo card ===== */
.todo-card {
  animation: slideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.25s ease;
}
.todo-card.is-done { opacity: 0.62; }
.todo-card.is-done .todo-text {
  text-decoration: line-through;
  text-decoration-color: var(--accent-soft);
  opacity: 0.7;
}

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

.check-btn {
  border-color: var(--check-border);
  color: transparent;
  font-size: 14px;
  line-height: 1;
}
.check-btn:hover { border-color: var(--accent); }
.check-btn.check-on {
  background: var(--check-on-bg);
  border-color: var(--check-on-bg);
  color: #fff;
}

.edit-area {
  border: 1px dashed var(--accent-soft);
  background: var(--bg-glow);
  color: var(--ink);
}

/* ===== Mini buttons ===== */
.mini-btn {
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--ink);
  transition: all 0.15s ease;
}
.mini-btn:hover { border-color: var(--accent); }
.mini-save {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff8ef;
}
.mini-save:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.mini-del:hover { border-color: var(--danger); color: var(--danger); }

/* ===== Filters ===== */
.filter-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  opacity: 0.6;
}
.filter-tab:hover { opacity: 1; }
.filter-active {
  background: var(--surface);
  border-color: var(--surface-border);
  opacity: 1;
}
.clear-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
  opacity: 0.75;
}
.clear-btn:hover { opacity: 1; text-decoration: underline; }

/* ===== Theme toggle ===== */
.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--ink);
  transition: all 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent); }

/* ===== Footer ===== */
.footer-line { border-top: 1px solid var(--surface-border); }
.remix-link { color: var(--accent); text-decoration: none; }
.remix-link:hover { text-decoration: underline; }

/* ===== Ink drop ===== */
.ink-drop {
  font-size: 2rem;
  display: inline-block;
  animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* ===== Staggered load ===== */
.stagger {
  animation: rise 0.5s ease both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-state { animation: rise 0.6s ease both; }

/* ===== Confetti ===== */
#confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}
.confetti-piece {
  position: absolute;
  top: 55%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  animation: burst 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes burst {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}

/* scrollbar polish */
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 4px;
}