/* ============================================================
   base.css — reset, document ground, and the type roles.
   Owns: html, body, *, and the .t-* type classes.
   Owns NO component and NO layout.
   Load second, on every page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-ground);
}

body {
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a         { color: var(--accent); text-decoration: none; }
a:hover   { color: var(--accent-hi); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Every panel spaces its children with a flex `gap`, so a browser's own 1em
   paragraph margin is not smaller or larger than intended — it is a second,
   invisible spacing system arriving underneath the first. Reset here so
   no panel has to work around it by hand. */
p { margin: 0; }

/* every figure on every screen */
.num { font-variant-numeric: tabular-nums; }

/* ---- scrollbars ------------------------------------------
   Any scrolling surface. A default OS scrollbar is brighter
   than the accent and would win the eye inside a translucent
   panel, so it joins the tone ladder like everything else. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
*::-webkit-scrollbar        { width: var(--scrollbar-w); height: var(--scrollbar-w); }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-hover); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---- type roles: six sizes, no more ---------------------- */
.t-display { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.t-title   { font-size: var(--fs-title);   font-weight: var(--fw-title);   letter-spacing: var(--ls-title); }
.t-step    { font-size: var(--fs-step);    font-weight: var(--fw-step);    letter-spacing: var(--ls-step);    color: var(--text-1); }
.t-label   { font-size: var(--fs-label);   color: var(--text-2); }
.t-value   { font-size: var(--fs-label);   color: var(--text-1); font-variant-numeric: tabular-nums; }
.t-unit    { font-size: var(--fs-hint);    color: var(--text-3); }
.t-hint    { font-size: var(--fs-hint);    color: var(--text-3); }
.t-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow);
             color: var(--text-2); text-transform: uppercase; }
.t-micro   { font-size: var(--fs-micro);   font-weight: var(--fw-micro);   letter-spacing: var(--ls-micro);
             text-transform: uppercase; }

/* NEVER express hierarchy with opacity. Use size, weight, tone. */