/* =========================================================
   Base: reset, typography, utilities
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-height) + 16px); }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  font-feature-settings: 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--color-surface-sunken); padding: 1px 6px; border-radius: var(--border-radius-xs); }
::selection { background: var(--color-primary-soft); color: var(--color-text); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
p { margin: 0 0 .85em; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }

.icon { flex-shrink: 0; vertical-align: middle; }

/* Focus — visible for keyboard users only */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--border-radius-xs); }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-progress);
  padding: 10px 16px; border-radius: var(--border-radius-sm);
  background: var(--color-text); color: var(--color-background); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--transition-fast);
}
.skip-link:focus { transform: none; color: var(--color-background); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Utilities (kept small & composable) ---------- */
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.text-primary { color: var(--color-primary) !important; }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.cap { text-transform: capitalize; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }
.row { display: flex; align-items: center; }
.gap { gap: var(--space-3); }
.gap-sm { gap: var(--space-2); }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--space-3); }
.hidden { display: none !important; }
.mt { margin-top: var(--space-4); }
.mb { margin-bottom: var(--space-4); }
.mt-sm { margin-top: var(--space-2); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
ul.clean { list-style: none; padding: 0; margin: 0; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }