/* Base layer: font, reset, type scale, focus, utilities. Values come only from tokens.css. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  /* Latin subset of Inter (SIL OFL 1.1, static/fonts/Inter-OFL.txt), self-hosted: no third-party request. */
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchors (Skip to chart) and focus scrolling stop below the sticky top bar, not under it. */
  scroll-padding-top: calc(var(--topbar-offset) + var(--space-sm));
}
/* A modal is open (ui/modal-a11y.js): the page underneath must not scroll, so a drag on a popup never
 * moves it. The gutter keeps the scrollbar's space, so the page does not shift sideways on desktop. */
html.ts-modal-open { overflow: hidden; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-body-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }

::selection { background: var(--primary); color: var(--on-primary); }

/* Keyboard focus (DESIGN.md section 12): a 2 px lime ring with a 2 px gap. Pointer clicks don't show it. */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring-width) solid var(--primary);
  outline-offset: var(--focus-ring-gap);
}

/* Thin, quiet scrollbars on the dark surfaces. */
* { scrollbar-width: thin; scrollbar-color: var(--outline) transparent; }
::-webkit-scrollbar { width: var(--space-sm); height: var(--space-sm); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: var(--radius-pill); }

/* Every number is tabular so columns and ticking prices never jitter. */
.num, .tabular, table td, table th { font-variant-numeric: tabular-nums; }

/* ---- Type scale (DESIGN.md section 4) ---- */
.t-display-sm  { font-size: var(--fs-display-sm);  font-weight: var(--fw-display-sm);  line-height: 1.15; letter-spacing: -0.01em; }
.t-headline-sm { font-size: var(--fs-headline-sm); font-weight: var(--fw-headline-sm); line-height: 1.25; }
.t-title-lg    { font-size: var(--fs-title-lg);    font-weight: var(--fw-title-lg);    line-height: 1.3; }
.t-title-md    { font-size: var(--fs-title-md);    font-weight: var(--fw-title-md);    line-height: 1.35; }
.t-title-sm    { font-size: var(--fs-title-sm);    font-weight: var(--fw-title-sm);    line-height: 1.4; }
.t-body-lg     { font-size: var(--fs-body-lg);     font-weight: var(--fw-body-lg); }
.t-body-md     { font-size: var(--fs-body-md);     font-weight: var(--fw-body-md); }
.t-body-sm     { font-size: var(--fs-body-sm);     font-weight: var(--fw-body-sm); }
.t-label-lg    { font-size: var(--fs-label-lg);    font-weight: var(--fw-label-lg); }
.t-label-md    { font-size: var(--fs-label-md);    font-weight: var(--fw-label-md); }
.t-label-sm    { font-size: var(--fs-label-sm);    font-weight: var(--fw-label-sm); }
.t-secondary   { color: var(--text-secondary); }

/* ---- Utilities ---- */
.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;
}
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }

@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}