/* ============================================================
   base.css — Typography + element defaults
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--leading-relaxed);
  color: var(--ink);
  background: var(--canvas);
  font-feature-settings: "ss01", "ss02", "cv11";
  letter-spacing: var(--tracking-normal);
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.h-display {
  font-size: var(--fs-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

.h-1 {
  font-size: var(--fs-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h-2 {
  font-size: var(--fs-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h-3 {
  font-size: var(--fs-xl);
  line-height: var(--leading-snug);
}

.h-4 {
  font-size: var(--fs-lg);
}

/* ---- Serif accent (italic only) ---- */
em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---- Mono utility ---- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.mono-md {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}

/* ---- Paragraph ---- */
p {
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

p strong {
  color: var(--ink);
  font-weight: 600;
}

.lead {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

/* ---- Inline code (only outside dark code blocks) ---- */
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--canvas-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--ink);
}

/* ---- Code inside pre (dark blocks) inherits cleanly ---- */
pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ---- Links (inline content only — components use their own styles) ---- */
.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--signal);
  transition: color var(--t-fast);
}
.prose a:hover { color: var(--signal); }

/* ---- Horizontal rule ---- */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

/* ---- Selection inversion when on dark blocks ---- */
.dark ::selection {
  background: var(--signal);
  color: var(--code-bg);
}

/* ---- Scrollbar (subtle) ---- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--canvas); }
  ::-webkit-scrollbar-thumb {
    background: var(--rule-strong);
    border: 3px solid var(--canvas);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
}