/* ===================================================================
 * Reset + base typography. Component classes live in components.css;
 * use them rather than re-styling raw elements.
 * =================================================================== */

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

html {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  /* Page scrolls vertically as normal; just no visible scrollbar (matches the sidebar). */
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/old Edge */
}
body::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit */

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; }

input, textarea, select { font: inherit; color: inherit; }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}
img { height: auto; }

ul, ol { list-style: none; }

/* The HTML `hidden` attribute must always win — author display rules (e.g. .modal-backdrop { display:flex }) otherwise override the UA `[hidden]{display:none}` rule and leak open. */
[hidden] { display: none !important; }

/* Default focus ring (§12.1) — keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--focus-ring);
  border-radius: var(--radius-xs);
}

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

/* §3.5 — typography component classes */
.t-display { font: var(--weight-bold) var(--text-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.t-h1      { font: var(--weight-bold) var(--text-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.t-h2      { font: var(--weight-bold) var(--text-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.t-h3      { font: var(--weight-bold) var(--text-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.t-h4      { font: var(--weight-bold) var(--text-h4)/var(--lh-h4) var(--font-sans); color: var(--text-primary); }
.t-body-lg { font: var(--weight-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-sans); color: var(--text-primary); }
.t-body    { font: var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--text-primary); }
.t-body-sm { font: var(--weight-regular) var(--text-body-sm)/var(--lh-body-sm) var(--font-sans); color: var(--text-primary); }
.t-caption { font: var(--weight-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--text-tertiary); }
.t-micro   { font: var(--weight-regular) var(--text-micro)/var(--lh-micro) var(--font-sans); color: var(--text-tertiary); }
.t-nano    { font: var(--weight-medium) var(--text-nano)/var(--lh-nano) var(--font-sans); color: var(--text-tertiary); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* Reader page typography (used inside .reader__body, but also exported as classes) */
.r-h1      { font: var(--weight-bold) var(--text-reader-h1)/var(--lh-reader-h1) var(--font-serif); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.r-h2      { font: var(--weight-bold) var(--text-reader-h2)/var(--lh-reader-h2) var(--font-serif); color: var(--text-primary); }
.r-h3      { font: var(--weight-bold) var(--text-reader-h3)/var(--lh-reader-h3) var(--font-serif); color: var(--text-primary); }
.r-body    { font: var(--weight-regular) var(--text-reader-body)/var(--lh-reader-body) var(--font-serif); color: var(--text-primary); }
.r-caption { font: var(--weight-regular) var(--text-reader-caption)/var(--lh-reader-caption) var(--font-sans); color: var(--text-tertiary); font-style: italic; }

/* §8.4 — reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}