/* JobBreakdown typography contract. Every page and future bet uses these ranks.
   Numeric sizes live here only. See docs/design/typography.md. */
:root {
  --font-reading: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-reading);
  --font-display: var(--font-heading);
  --type-meta: .875rem;
  --type-body: 1rem;
  --type-card: 1.25rem;
  --type-section: 1.75rem;
  --type-page: 2.5rem;
  --type-display: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --type-metric: var(--type-page);
  --weight-reading: 400;
  --weight-label: 600;
  --weight-strong: 700;
  --leading-body: 1.6;
  --leading-meta: 1.5;
  --leading-control: 1.35;
  --leading-heading: 1.2;
  --tracking-heading: -.025em;
  --tracking-label: .075em;
  --measure-reading: 65ch;
}

@layer base {
body {
  font-family: var(--font-reading);
  font-size: var(--type-body);
  font-weight: var(--weight-reading);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
}
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: var(--type-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--leading-heading); font-weight: var(--weight-label); text-wrap: balance; }
h1 { font-size: var(--type-page); }
h2 { font-size: var(--type-section); }
h3, h4 { font-size: var(--type-card); }
strong, b { font-weight: var(--weight-strong); }
button, input, select, textarea, summary { line-height: var(--leading-control); }
table, .application-stats, .market-summary { font-variant-numeric: tabular-nums; }
}

/* The page rank stays predictable in product UI; only the editorial hero is fluid. */
@media (max-width: 40rem) {
  :root { --type-page: 2rem; }
}