/* ================================================================
   base.css — reset + typography + low-level utilities
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
}

body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "cv02";  /* Switzer stylistic sets */
  overflow-x: hidden;
}

/* All numerics use Monaspace with tabular figures */
.num, code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "calt" 0;  /* tabular + disable contextual ligatures for clarity */
}

/* Luminance helpers */
.text-hero      { color: var(--text-hero); }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-ghost     { color: var(--text-ghost); }

/* Signal color helpers (semantic classes drive color, never hex) */
.signal-live    { color: var(--signal-live); }
.signal-alert   { color: var(--signal-alert); }
.signal-pending { color: var(--signal-pending); }

/* Buttons — minimal, instrument-grade */
button {
  font: inherit;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
  letter-spacing: 0.01em;
}
button:hover  { border-color: var(--hairline-strong); background: var(--bg-elevated); }
button:focus-visible { outline: 1px solid var(--signal-pending); outline-offset: 2px; }

/* Links — no visited state, rare anyway */
a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 160ms var(--ease);
}
a:hover { border-color: var(--text-primary); }

/* Tables — tabular numerics, hairline dividers only */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
}
th {
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
td {
  font-family: var(--font-mono);
  font-size: var(--type-table);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--bg-elevated); }

/* Numeric alignment for financial tables */
td.num-right { text-align: right; }
td.num-pos   { color: var(--signal-live); }
td.num-neg   { color: var(--signal-alert); }

/* Data-update bloom animation — applied to any element that gains .just-updated class via JS */
@keyframes bloom {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}
.just-updated { animation: bloom var(--dur-bloom) var(--ease) 1; }

/* Strike-through for stale values */
.value-stale {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-muted);
}

/* Screen-reader only */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }