/* base.css - typography, layout primitives */

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.5;
}

/* Headings inherit display serif + tight tracking + line-height 1 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-weight: 500;
  color: var(--color-ink);
}

h1 { font-size: clamp(56px, 9vw, 144px); }
h2 { font-size: clamp(36px, 5.5vw, 80px); }
h3 { font-size: clamp(24px, 3vw, 40px); }
h4 { font-size: clamp(20px, 2vw, 28px); }

p {
  max-width: 65ch;
}

/* Layout primitives */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--space-section);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-section-md);
  }
}

.tone-night {
  background: var(--color-night);
  color: var(--color-paper);
}

.tone-night h1,
.tone-night h2,
.tone-night h3,
.tone-night h4,
.tone-night h5,
.tone-night h6 {
  color: var(--color-paper);
}

.tone-night .text-muted,
.tone-night p {
  color: var(--color-night-muted);
}

.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-paper { color: var(--color-paper); }

.bg-paper   { background: var(--color-paper); }
.bg-surface { background: var(--color-surface); }
.bg-night   { background: var(--color-night); }
.bg-ink     { background: var(--color-ink); }

.border-hairline { border: 1px solid var(--color-hairline); }

/* Italic display utility */
.display-italic {
  font-style: italic;
  font-feature-settings: "ss01", "ss02";
}

/* Mono display for stability notes, install previews */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}

/* Eyebrow pill - used sparingly (max 4 across the page per skill rule) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow-muted {
  border-color: var(--color-hairline);
  color: var(--color-muted);
}

/* Hairline top divider */
.hairline-top {
  border-top: 1px solid var(--color-hairline);
}

/* Body paragraph helper */
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 60ch;
}

.body-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 60ch;
}

.body-text strong,
.body-text em {
  color: var(--color-ink);
}

/* Focus ring - accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}