/* Typography system
   Cabinet Grotesk: branding, hero copy, headings, section titles
   Satoshi: body copy, navigation, buttons, cards, general UI
   JetBrains Mono: pool IDs, balances, epochs, timestamps, rewards and dashboard metrics
*/
:root {
  --font-brand: "Cabinet Grotesk", "Segoe UI", sans-serif;
  --font-ui: "Satoshi", "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --display: var(--font-brand);
  --body: var(--font-ui);
  --mono: var(--font-data);
  --font-weight-display: 700;
  --font-weight-display-strong: 800;
  --font-weight-ui-strong: 700;
  --font-weight-data: 500;
  --font-weight-data-strong: 700;
  --tracking-display: -0.03em;
  --tracking-data: -0.02em;
  --line-height-body: 1.72;
  --line-height-display: 1.08;
  --line-height-display-compact: 1.01;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
textarea,
select {
  font-family: var(--body);
}

body {
  line-height: var(--line-height-body);
}

.brand-copy strong,
h1,
h2,
h3 {
  font-family: var(--display);
  letter-spacing: var(--tracking-display);
}

.eyebrow {
  font-family: var(--display);
}

h1 {
  line-height: var(--line-height-display-compact);
  font-weight: var(--font-weight-display-strong);
}

h2,
h3,
.brand-copy strong {
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-display);
}

.header-nav a,
.btn,
.copy-inline-btn {
  font-weight: var(--font-weight-ui-strong);
}

code,
.type-data,
.status-chip-value,
.epoch-head strong,
.epoch-date,
.epoch-list strong,
.bar-head span,
.bar-head strong {
  font-family: var(--mono);
  letter-spacing: var(--tracking-data);
  font-variant-numeric: tabular-nums;
}

code,
.type-data,
.epoch-date,
.bar-head span {
  font-weight: var(--font-weight-data);
}

.metric-value.type-data,
.hero-card-value.type-data,
.status-chip-value,
.epoch-head strong,
.epoch-list strong,
.bar-head strong {
  font-weight: var(--font-weight-data-strong);
}
