/* =========================================================
   BASE — reset, typography, global element defaults
   ========================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; /* page itself never scrolls sideways */
}

body {
  font: var(--text-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Any element that forgets to constrain itself falls back to this. */
* { min-width: 0; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, p { margin: 0; }

ul { list-style: none; margin: 0; padding: 0; }

input, select, textarea {
  font-family: var(--font-family);
  font-size: 15px;
  color: var(--color-text);
}

/* ---- Focus states (Section 34 — accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Typography utility classes ---- */
.text-page-title    { font: var(--text-page-title); color: var(--color-text); }
.text-section-heading { font: var(--text-section-heading); color: var(--color-text); }
.text-card-heading   { font: var(--text-card-heading); color: var(--color-text); }
.text-body           { font: var(--text-body); color: var(--color-text-secondary); }
.text-meta           { font: var(--text-meta); color: var(--color-muted); }

/* ---- Screen-reader only utility (Section 34) ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Touch target minimum (Section 34: ~44px) ---- */
.tap-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}