:root {
  --body-font: Figtree, Arial, sans-serif;
  --heading-font: Outfit, Arial, sans-serif;
  --mono-font: 'JetBrains Mono', Consolas, monospace;
}
body, body.app-page { font-family: var(--body-font); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
body :is(h1,h2,h3,h4,h5,h6) { font-family: var(--heading-font); letter-spacing: 0; overflow-wrap: anywhere; }
body h1 { font-size: 32px; font-weight: 800; line-height: 1.15; }
body h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
body :is(h3,h4,h5,h6) { font-weight: 600; line-height: 1.35; }
body h3 { font-size: 18px; }
body :is(h4,h5,h6) { font-size: 16px; }
body .hero h1 { font-size: 58px; line-height: 1.08; }
body .list-tile h2, body .part-card h2 { font-size: 18px; }
body :is(strong,b,th) { font-weight: 600; }
body :is(label,nav,.meta,.table-muted) { font-weight: 500; }
body :is(nav a,.admin-tab,.tab,.form-label) { font-weight: 500; }
body :is(button,input,textarea,select) { font-family: var(--body-font); letter-spacing: 0; }
body :is(input,textarea,select) { font-weight: 400; }
body :is(button,.button) { font-weight: 600; }
body :is(code,pre,kbd,samp,.data-id,.data-quantity,.data-format,.email-hex,input[type=number]) {
  font-family: var(--mono-font); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
body :is(.data-id,.data-quantity,.data-format) { font-size: .9em; }
body .data-metric { font-family: var(--mono-font); font-weight: 500; font-variant-numeric: tabular-nums; }
body .data-id { overflow-wrap: anywhere; }
body .button {
  font-family: var(--body-font); font-size: 16px; font-weight: 600; line-height: 1.35;
  min-height: 44px; max-width: 100%; padding: 11px 18px; border: 2px solid transparent;
  border-radius: 6px; text-align: center; white-space: normal; overflow-wrap: anywhere;
  box-sizing: border-box; cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
body .button.primary { background: var(--blue); color: var(--primary-text); border-color: var(--blue); }
body .button.secondary { background: var(--surface); color: var(--blue); border-color: var(--blue); box-shadow: none; }
body .button.primary:hover:not(:disabled):not([aria-disabled=true]) {
  background: var(--blue); filter: none; box-shadow: inset 0 0 0 1px var(--primary-text);
}
body .button.secondary:hover:not(:disabled):not([aria-disabled=true]) { background: var(--soft); filter: none; }
body .button:active:not(:disabled):not([aria-disabled=true]) { box-shadow: inset 0 0 0 2px currentColor; }
body :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
body .button:disabled, body .button[aria-disabled=true], body fieldset:disabled .button {
  opacity: .5; cursor: not-allowed; filter: none; box-shadow: none;
}
body .button.danger-button { color: #B91C1C; border-color: #B91C1C; background: var(--surface); }
body .button.danger-button:hover:not(:disabled) { color: #B91C1C; background: var(--soft); }
body .appearance-preview .button { font-size: 14px; padding: 10px 12px; }
body .appearance-fonts { grid-template-columns: minmax(0,1fr); }
@media (max-width:700px) {
  body .hero h1 { font-size: 36px; }
  body h1 { font-size: 28px; }
  body .button { padding: 10px 14px; }
}
@media (max-width:380px) { body .hero h1 { font-size: 30px; } }
@media (prefers-reduced-motion:reduce) { body .button { transition: none; } }