/*
 * typography.css — Firmeza Design System
 *
 * Font pairing: Plus Jakarta Sans (display/headings) + Inter (body/UI)
 *
 * Type roles:
 *   display  — Hero headlines, massive statement text
 *   heading  — Section titles (h1–h6)
 *   body     — Long-form paragraphs, descriptive copy
 *   ui       — Labels, buttons, captions, meta
 *   mono     — Code snippets, technical strings
 */

/* ── Base body ───────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* ── Display ─────────────────────────────────────────────────────────── */

.text-display-2xl {
  font-family:    var(--font-display);
  font-size:      var(--text-display-2xl);
  font-weight:    var(--weight-extrabold);
  line-height:    var(--leading-tightest);
  letter-spacing: var(--tracking-tighter);
  color:          var(--color-text-primary);
}

.text-display-xl {
  font-family:    var(--font-display);
  font-size:      var(--text-display-xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-primary);
}

.text-display-lg {
  font-family:    var(--font-display);
  font-size:      var(--text-display-lg);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-primary);
}

/* ── Headings ────────────────────────────────────────────────────────── */

h1, .h1 {
  font-family:    var(--font-heading);
  font-size:      var(--text-h1);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-primary);
}

h2, .h2 {
  font-family:    var(--font-heading);
  font-size:      var(--text-h2);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color:          var(--color-text-primary);
}

h3, .h3 {
  font-family:    var(--font-heading);
  font-size:      var(--text-h3);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color:          var(--color-text-primary);
}

h4, .h4 {
  font-family:    var(--font-heading);
  font-size:      var(--text-h4);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text-primary);
}

h5, .h5 {
  font-family:    var(--font-heading);
  font-size:      var(--text-h5);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text-primary);
}

h6, .h6 {
  font-family:    var(--font-body);
  font-size:      var(--text-h6);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text-primary);
}

/* ── Body copy ───────────────────────────────────────────────────────── */

.body-lg {
  font-size:   var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

p,
.body {
  font-size:   var(--text-body);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

.body-sm {
  font-size:   var(--text-body-sm);
  line-height: var(--leading-normal);
  color:       var(--color-text-secondary);
}

/* Prose — long-form reading content */
.prose {
  max-width: 72ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-prose);
  color: var(--color-text-secondary);
}

.prose p + p  { margin-top: var(--space-4); }
.prose h2     { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3     { margin-top: var(--space-8);  margin-bottom: var(--space-3); }
.prose ul,
.prose ol     { margin: var(--space-4) 0; padding-left: var(--space-6); }
.prose li     { margin-bottom: var(--space-2); }

/* ── Eyebrow / Overline ──────────────────────────────────────────────── */

/* Small uppercase label above section titles */
.eyebrow {
  display:        inline-block;
  font-family:    var(--font-ui);
  font-size:      var(--text-label);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color:          var(--color-text-brand);
}

/* ── UI text ─────────────────────────────────────────────────────────── */

.text-sm      { font-size: var(--text-sm);      }
.text-xs      { font-size: var(--text-xs);      }
.text-2xs     { font-size: var(--text-2xs);     }
.text-label   { font-size: var(--text-label);   }
.text-caption { font-size: var(--text-caption); }

/* ── Links ───────────────────────────────────────────────────────────── */

a {
  color: inherit;
  text-decoration: none;
}

.link {
  color:           var(--color-text-brand);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
  position:        relative;
}

.link::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -1px;
  width:      0;
  height:     1px;
  background: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}

.link:hover { color: var(--color-brand-700); }
.link:hover::after { width: 100%; }

/* ── Inline elements ─────────────────────────────────────────────────── */

strong, b    { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
em, i        { font-style: italic; }
small        { font-size: var(--text-sm); color: var(--color-text-tertiary); }
abbr[title]  { text-decoration: underline dotted; cursor: help; }

mark {
  background:    rgba(21, 67, 120, 0.15);
  color:         var(--color-brand-800);
  border-radius: var(--radius-xs);
  padding:       0 var(--space-1);
}

/* ── Code & pre ──────────────────────────────────────────────────────── */

code {
  font-family:    var(--font-mono);
  font-size:      0.875em;
  font-weight:    var(--weight-medium);
  background:     var(--color-bg-muted);
  color:          var(--color-brand-700);
  padding:        0.1em 0.4em;
  border-radius:  var(--radius-xs);
  border:         1px solid var(--color-border);
}

pre {
  font-family:    var(--font-mono);
  font-size:      var(--text-sm);
  background:     var(--color-zinc-950);
  color:          var(--color-zinc-100);
  padding:        var(--space-6);
  border-radius:  var(--radius-lg);
  overflow-x:     auto;
  line-height:    var(--leading-relaxed);
  border:         1px solid var(--color-zinc-800);
}

pre code {
  background:     none;
  border:         none;
  color:          inherit;
  padding:        0;
  font-size:      inherit;
}

/* ── Blockquote ──────────────────────────────────────────────────────── */

blockquote {
  position:     relative;
  padding:      var(--space-6) var(--space-8);
  border-left:  3px solid var(--color-brand-500);
  background:   var(--color-brand-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin:       var(--space-8) 0;
  font-size:    var(--text-body-lg);
  font-style:   italic;
  color:        var(--color-text-secondary);
  line-height:  var(--leading-relaxed);
}

blockquote cite {
  display:       block;
  margin-top:    var(--space-4);
  font-size:     var(--text-sm);
  font-style:    normal;
  font-weight:   var(--weight-medium);
  color:         var(--color-text-tertiary);
}

/* ── Gradient text utility ───────────────────────────────────────────── */

/* Solid golden emphasis — no gradient */
.text-gradient {
  font-family:    'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style:     italic;
  font-weight:    400;
  font-size:      1.1em;
  letter-spacing: normal;
  color:          var(--color-text-accent);
}

/* ── Utility overrides ───────────────────────────────────────────────── */

.font-display  { font-family: var(--font-display); }
.font-heading  { font-family: var(--font-heading); }
.font-body     { font-family: var(--font-body); }
.font-mono     { font-family: var(--font-mono); }

.font-thin       { font-weight: var(--weight-thin);      }
.font-light      { font-weight: var(--weight-light);     }
.font-regular    { font-weight: var(--weight-regular);   }
.font-medium     { font-weight: var(--weight-medium);    }
.font-semibold   { font-weight: var(--weight-semibold);  }
.font-bold       { font-weight: var(--weight-bold);      }
.font-extrabold  { font-weight: var(--weight-extrabold); }
.font-black      { font-weight: var(--weight-black);     }

.leading-none     { line-height: var(--leading-none);     }
.leading-tight    { line-height: var(--leading-tight);    }
.leading-snug     { line-height: var(--leading-snug);     }
.leading-normal   { line-height: var(--leading-normal);   }
.leading-relaxed  { line-height: var(--leading-relaxed);  }
.leading-loose    { line-height: var(--leading-loose);    }

.tracking-tight   { letter-spacing: var(--tracking-tight);   }
.tracking-normal  { letter-spacing: var(--tracking-normal);  }
.tracking-wide    { letter-spacing: var(--tracking-wide);    }
.tracking-wider   { letter-spacing: var(--tracking-wider);   }
.tracking-widest  { letter-spacing: var(--tracking-widest);  }

.text-left    { text-align: left;    }
.text-center  { text-align: center;  }
.text-right   { text-align: right;   }

.text-primary   { color: var(--color-text-primary);   }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary);  }
.text-muted     { color: var(--color-text-tertiary);  }
.text-inverse   { color: var(--color-text-inverse);   }
.text-brand     { color: var(--color-text-brand);     }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.line-clamp-2 {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.line-clamp-3 {
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}