:root, .checklist {
  --soft: var(--muted);
  --surface: var(--bg);
  --pale: var(--tint);
}

:root {
  color-scheme: light;
  color: var(--ink);
  background: var(--pale);
  font: 400 var(--ui-font-size)/1.5 var(--f-body);
}

h1, h2, h3 {
  font-family: var(--f-display); font-weight: 700; line-height: 1.15; text-wrap: balance;
}

body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; }

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