/* ============================================================
   AERONAV — Base / reset / primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
  overflow: hidden;
}

/* tabular figures everywhere numbers matter */
.tnum, td.num, .metric, .telemetry, .value { font-variant-numeric: tabular-nums; }

h1,h2,h3,h4,p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* Inline icon default sizing (charts/instruments opt out via their own class) */
svg.ic { width: 18px; height: 18px; flex: none; }
svg.ic-xl { width: 44px; height: 44px; }
.card-head > svg.ic:first-child { color: var(--text-tertiary); }
.kpi svg.ic, .status svg.ic { width: 16px; height: 16px; }
a { color: var(--blue); text-decoration: none; }
::selection { background: var(--blue-wash); }

/* Scrollbars — thin, unobtrusive, engineered feel */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; }

/* Focus — visible, precise, accessible */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Type helpers */
.t-page    { font-size: var(--fs-page);    line-height: var(--lh-page);    font-weight: 600; letter-spacing: -.02em; }
.t-section { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; letter-spacing: -.01em; }
.t-card    { font-size: var(--fs-card);    line-height: var(--lh-card);    font-weight: 500; }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-tertiary); }
.t-mono    { font-family: var(--font-mono); }
.muted     { color: var(--text-secondary); }
.dim       { color: var(--text-tertiary); }

.upper { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

/* Utility layout */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.grow { flex: 1 1 auto; }
.spacer { flex: 1 1 auto; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }

/* Divider */
.hr { height: 1px; background: var(--border-default); border: 0; margin: 0; }
.vr { width: 1px; align-self: stretch; background: var(--border-default); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 var(--red-wash); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}