/* ═══════════════════════════════════════════
   base.css — Reset, body, links, utilities
   ═══════════════════════════════════════════ */

/* ─── Brand palette ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans);
       background: var(--surface-1); color: var(--text-primary); line-height: var(--lh-base);
       font-size: var(--fs-body); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-accent); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ─── Utility ─── */
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.gap-8 { gap: 8px; } .gap-20 { gap: 20px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.hidden { display: none; }
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }