/* ------------------------------------------------------------------
   Base typography & element styles
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p { line-height: var(--lh-relaxed); color: var(--text); }
small { font-size: var(--fs-sm); color: var(--text-muted); }

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

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--s-4) 0;
}

::selection {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* Utility: hide visually but keep for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Utility: hidden */
.hidden { display: none !important; }

/* Utility: only on certain breakpoints */
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }