:root {
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-36: 36px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-friendly: 800;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-ui: 0;
  --tracking-label: 0.06em;
}

html,
body,
button,
input,
select,
textarea,
option,
label,
table,
th,
td,
nav,
dialog,
[role="button"],
[role="tab"],
[role="menuitem"],
.button,
.panel,
.card,
.nav-link,
.badge,
.tab,
.modal,
.toast,
.sidebar,
.topbar {
  font-family: var(--font-ui) !important;
}

body {
  font-size: var(--text-15);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-ui);
}

h1,
.page-title h1,
.public-profile-hero-copy h1 {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-display) !important;
}

h2,
h3,
h4,
.section-head,
.public-profile-section-head {
  font-family: var(--font-ui) !important;
  letter-spacing: var(--tracking-heading) !important;
}

h2 { font-weight: var(--weight-bold) !important; }
h3,
h4 { font-weight: var(--weight-semibold) !important; }

:where(button, .button, [role="button"], [role="tab"], input, select, textarea) {
  font-size: var(--text-13);
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-ui) !important;
}

body :is(button, input, select, textarea, [role="button"], [role="tab"]),
body :is(.market-dropdown-trigger, .market-sort-trigger, .market-price-input, .market-table-tabs button) {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-ui) !important;
}

body :is(button, .button, [role="button"], [role="tab"]) {
  font-weight: var(--weight-bold) !important;
}

body :is(input, select, textarea, .market-price-input) {
  font-weight: var(--weight-medium) !important;
}

:where(.nav-link, .topbar, .sidebar, .auth-controls) {
  font-size: var(--text-14);
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-ui) !important;
}

body :is(.nav-link, .nav-section-link, .topbar a, .sidebar a) {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-ui) !important;
}

:where(.nav-label, .public-profile-kicker, .stage2-home-kicker, .home-directions-head p) {
  font-size: var(--text-11) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-label) !important;
}

:where(.badge, .role-badge, [class*="badge"], .chip, .pill) {
  font-size: var(--text-12);
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0 !important;
}

:where(table, th, td) {
  font-size: var(--text-13);
  letter-spacing: 0 !important;
}

th { font-weight: var(--weight-semibold) !important; }
td { font-weight: var(--weight-regular) !important; }

:where(strong, b) { font-weight: var(--weight-semibold); }

:where(.card, .panel, .store-product-card, .home-direction, .hero-explore-card) strong {
  font-weight: var(--weight-bold);
}

:where(code, pre, kbd, samp, .code-line, .wiki-content code, .wiki-content pre) {
  font-family: var(--font-code) !important;
  letter-spacing: 0 !important;
}

/* Technical values may be monospaced; their surrounding controls stay UI. */
:where(.mini-copy, .server-address, .command-value, [data-technical-value]) {
  font-family: var(--font-code) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0 !important;
}

/* Brand remains in the UI family until a dedicated, approved display face exists. */
.brand-title {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-friendly) !important;
}

/* Hero follows the same heading voice as the rest of the interface. */
.stage2-home-copy > h1,
.home-news-active h1 {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-heading) !important;
}

@media (max-width: 600px) {
  body { font-size: var(--text-14); }
}