/* ==========================================================================
   typography.css — Font, Headings, Text Utilities
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* ---------- Paragraph ---------- */
p {
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* ---------- Links ---------- */
a {
  color: var(--color-green-main);
  transition: var(--transition-fast);
}
a:hover {
  color: var(--color-green-deep);
}

/* ---------- Code ---------- */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-green-deep);
}

pre {
  font-family: var(--font-mono);
  line-height: var(--leading-relaxed);
  white-space: pre;
  overflow-x: auto;
}

/* ---------- Font Size Utilities ---------- */
.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); }

/* ---------- Font Weight Utilities ---------- */
.font-normal   { font-weight: var(--weight-normal); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* ---------- Text Color Utilities ---------- */
.text-default   { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-green     { color: var(--color-green-main); }
.text-gold      { color: var(--color-gold-dark); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }
.text-info      { color: var(--color-info); }
.text-white     { color: #ffffff; }

/* ---------- Text Alignment ---------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---------- Transform ---------- */
.uppercase   { text-transform: uppercase; letter-spacing: .05em; }
.capitalize  { text-transform: capitalize; }
.lowercase   { text-transform: lowercase; }

/* ---------- Misc ---------- */
.mono        { font-family: var(--font-mono); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

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

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

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