/* Somust Markets — Typography System (single source of truth)
   ============================================================
   One consistent, Inter-based type scale for every Somust surface
   (design/*.html, web/, and — via the mirrored onchain/app/src/styles/typography.ts —
   the on-chain wallet app). Change a value here, it changes everywhere that
   links this file.

   Rule: components should reference these tokens/classes, never hardcode a
   font-size/weight/letter-spacing/line-height of their own.

   Numeric financial data (odds, prices, USDC amounts, TVL, volumes,
   percentages) MUST use `font-variant-numeric: tabular-nums` so digits don't
   jiggle horizontally as they update — baked into the relevant categories
   below (Market Odds, Price, Percentage, Statistic, Table numeric cells) and
   available standalone via `.tabular-nums`.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Display --- */
  --fs-display: 3.5rem;      /* 56px */
  --fw-display: 700;
  --lh-display: 1.1;
  --ls-display: -0.02em;

  /* --- H1 --- */
  --fs-h1: 2.5rem;           /* 40px */
  --fw-h1: 700;
  --lh-h1: 1.15;
  --ls-h1: -0.02em;

  /* --- H2 --- */
  --fs-h2: 2rem;             /* 32px */
  --fw-h2: 600;
  --lh-h2: 1.2;
  --ls-h2: -0.015em;

  /* --- H3 --- */
  --fs-h3: 1.5rem;           /* 24px */
  --fw-h3: 600;
  --lh-h3: 1.25;
  --ls-h3: -0.01em;

  /* --- H4 --- */
  --fs-h4: 1.25rem;          /* 20px */
  --fw-h4: 600;
  --lh-h4: 1.3;
  --ls-h4: -0.005em;

  /* --- Body Large --- */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fw-body-lg: 400;
  --lh-body-lg: 1.55;
  --ls-body-lg: 0;

  /* --- Body --- */
  --fs-body: 1rem;           /* 16px */
  --fw-body: 400;
  --lh-body: 1.5;
  --ls-body: 0;

  /* --- Small --- */
  --fs-small: 0.875rem;      /* 14px */
  --fw-small: 400;
  --lh-small: 1.45;
  --ls-small: 0;

  /* --- Caption --- */
  --fs-caption: 0.75rem;     /* 12px */
  --fw-caption: 500;
  --lh-caption: 1.4;
  --ls-caption: 0.01em;

  /* --- Button --- */
  --fs-button: 0.875rem;     /* 14px */
  --fw-button: 600;
  --lh-button: 1;
  --ls-button: 0.01em;

  /* --- Label (micro / eyebrow / badges — the former ad hoc 10-11px cluster) --- */
  --fs-label: 0.6875rem;     /* 11px */
  --fw-label: 600;
  --lh-label: 1.2;
  --ls-label: 0.04em;

  /* --- Market Odds (the big % on a market card) --- */
  --fs-market-odds: 1.25rem; /* 20px */
  --fw-market-odds: 700;
  --lh-market-odds: 1.1;
  --ls-market-odds: -0.01em;

  /* --- Price --- */
  --fs-price: 1.5rem;        /* 24px */
  --fw-price: 700;
  --lh-price: 1.1;
  --ls-price: -0.01em;

  /* --- Percentage (inline, smaller than Market Odds — deltas, APY, fills) --- */
  --fs-percentage: 0.875rem; /* 14px */
  --fw-percentage: 600;
  --lh-percentage: 1.2;
  --ls-percentage: 0;

  /* --- Statistic (dashboard/vault KPI numbers: TVL, volume, drawdown) --- */
  --fs-statistic: 2rem;      /* 32px */
  --fw-statistic: 700;
  --lh-statistic: 1.1;
  --ls-statistic: -0.02em;

  /* --- Table (dense rows/cells) --- */
  --fs-table: 0.8125rem;     /* 13px */
  --fw-table: 400;
  --lh-table: 1.4;
  --ls-table: 0;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Native form controls don't inherit the page font by default (browser UA
   stylesheets give them a platform system font) -- confirmed live 2026-07-14
   via CSS.getMatchedStylesForNode that an unclassed button fell back to the
   OS default instead of Inter. This is the fix: low-specificity element
   selectors, so any existing class/inline font-family (e.g. .tab-btn,
   .chip) still wins over this — only genuinely unstyled controls change. */
button, input, select, textarea {
  font-family: inherit;
}

.text-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.text-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.text-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.text-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
.text-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}
.text-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.text-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}
.text-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}
.text-button {
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-button);
}
.text-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.text-market-odds {
  font-family: var(--font-sans);
  font-size: var(--fs-market-odds);
  font-weight: var(--fw-market-odds);
  line-height: var(--lh-market-odds);
  letter-spacing: var(--ls-market-odds);
  font-variant-numeric: tabular-nums;
}
.text-price {
  font-family: var(--font-sans);
  font-size: var(--fs-price);
  font-weight: var(--fw-price);
  line-height: var(--lh-price);
  letter-spacing: var(--ls-price);
  font-variant-numeric: tabular-nums;
}
.text-percentage {
  font-family: var(--font-sans);
  font-size: var(--fs-percentage);
  font-weight: var(--fw-percentage);
  line-height: var(--lh-percentage);
  letter-spacing: var(--ls-percentage);
  font-variant-numeric: tabular-nums;
}
.text-statistic {
  font-family: var(--font-sans);
  font-size: var(--fs-statistic);
  font-weight: var(--fw-statistic);
  line-height: var(--lh-statistic);
  letter-spacing: var(--ls-statistic);
  font-variant-numeric: tabular-nums;
}
.text-table {
  font-family: var(--font-sans);
  font-size: var(--fs-table);
  font-weight: var(--fw-table);
  line-height: var(--lh-table);
  letter-spacing: var(--ls-table);
}
.text-table.tabular-nums,
.text-table .tabular-nums {
  font-variant-numeric: tabular-nums;
}