/* ============================================================
   TYPOGRAPHY — references tokens from global.css
   ============================================================ */

:root {
  --font-body:     'Inter', sans-serif;
  --font-heading:  'Inter', sans-serif;
  --font-mono:     'Courier New', monospace;

  --text-base:  1rem;
  --text-sm:    0.875rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;

  --text-h1:    clamp(2rem, 5vw, 3rem);
  --text-h2:    clamp(1.5rem, 4vw, 2.25rem);
  --text-h3:    clamp(1.25rem, 3vw, 1.75rem);
  --text-h4:    1.25rem;
  --text-h5:    1.125rem;
  --text-h6:    1rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.05em;
}

body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--color-text);
  background:  var(--color-bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-heading);
  margin-top:     0;
  margin-bottom:  0.5em;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
  margin-top:    0;
  margin-bottom: 1.25em;
  max-width:     70ch;
}

a {
  color:                var(--color-link);
  text-decoration:      underline;
  text-underline-offset: 2px;
  transition:           color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

strong, b { font-weight: var(--weight-bold); }
em, i     { font-style: italic; }

small {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}