/* ==========================================================================
   Infobox — Typography
   Self-hosted Inter (display) + DM Sans (body)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600 800;
  font-display: block;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: block;
  src: url('../assets/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* Responsive heading scale */
@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

/* Body copy */
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  word-spacing: 0.05em;
  color: var(--color-text-primary);
}

/* Prose container — max line length */
.prose {
  max-width: 68ch;
}

.prose a {
  color: var(--color-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: var(--color-action-hover);
  text-decoration-thickness: 2px;
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  border-left: 3px solid var(--color-blue);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--color-blue);
}

/* Lead paragraph */
.text-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.65;
  max-width: 60ch;
}

/* Text sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); letter-spacing: -0.02em; }
.text-4xl  { font-size: var(--text-4xl); letter-spacing: -0.02em; }
.text-5xl  { font-size: var(--text-5xl); letter-spacing: -0.02em; }
.text-6xl  { font-size: var(--text-6xl); letter-spacing: -0.02em; }

/* Uppercase labels */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Font weights */
.font-light    { font-weight: 300; }
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Font families */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

/* Inverse text (for dark backgrounds) */
.text-inverse {
  color: var(--color-text-inverse);
}

.text-inverse p,
.text-inverse h1,
.text-inverse h2,
.text-inverse h3,
.text-inverse h4,
.text-inverse h5,
.text-inverse h6 {
  color: var(--color-text-inverse);
}

.text-secondary {
  color: var(--color-text-secondary);
}