/* =============================================================================
 * Base — reset, typography, body, scrollbars, focus rings.
 * ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--md-on-surface);
  background: var(--md-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Material focus ring — 2px outline at 2px offset, primary tint. */
:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus, .btn:focus { box-shadow: 0 0 0 3px var(--md-state-tint); }

/* Scrollbars — slim, neutral. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd8dc; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: #b0bec5; }
::-webkit-scrollbar-track { background: transparent; }

/* Headings inherit weight, no extra margin baggage. */
h1,h2,h3,h4,h5,h6 { font-weight: var(--fw-bold); margin: 0; line-height: 1.25; }
p { margin: 0 0 var(--space-3); }

.fw-500 { font-weight: var(--fw-medium); }
.fw-600 { font-weight: var(--fw-semibold); }
.fw-700 { font-weight: var(--fw-bold); }
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-muted-2 { color: var(--md-on-surface-3); }