/* ==========================================================================
   RustPress Enterprise Theme - Typography
   ========================================================================== */

/* ========== Headings ========== */
h1, h2, h3, h4, h5, h6,
.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-primary);
  margin-bottom: 0.5em;
}

h1, .h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
}

h2, .h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
}

h3, .h3 {
  font-size: var(--text-3xl);
}

h4, .h4 {
  font-size: var(--text-2xl);
}

h5, .h5 {
  font-size: var(--text-xl);
}

h6, .h6 {
  font-size: var(--text-lg);
}

/* ========== Display Headings ========== */
.display-1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
}

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

/* ========== Paragraphs & Body Text ========== */
p {
  margin-bottom: 1em;
  line-height: var(--leading-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

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

small, .small {
  font-size: var(--text-sm);
}

.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); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* ========== Font Weights ========== */
.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); }
.font-extrabold { font-weight: var(--weight-extrabold); }

/* ========== Line Height ========== */
.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); }

/* ========== Letter Spacing ========== */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.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 Colors ========== */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-rust { color: var(--color-rust); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

/* ========== Text Gradient ========== */
.text-gradient {
  background: var(--gradient-rust);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-sunset {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== Text Decorations ========== */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.underline-rust {
  text-decoration: underline;
  text-decoration-color: var(--color-rust);
  text-underline-offset: 4px;
}

/* ========== Text Transform ========== */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ========== Text Overflow ========== */
.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;
}

/* ========== Lists ========== */
.list-disc {
  list-style-type: disc;
  padding-left: var(--space-6);
}

.list-decimal {
  list-style-type: decimal;
  padding-left: var(--space-6);
}

.list-disc li,
.list-decimal li {
  margin-bottom: var(--space-2);
}

/* ========== Inline Text ========== */
strong, b, .bold {
  font-weight: var(--weight-bold);
}

em, i, .italic {
  font-style: italic;
}

mark, .highlight {
  background: linear-gradient(120deg, rgba(206, 66, 43, 0.3) 0%, rgba(233, 116, 81, 0.3) 100%);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

/* ========== Code & Pre ========== */
code, kbd, samp, pre {
  font-family: var(--font-code);
  font-size: 0.9em;
}

code {
  background-color: var(--color-bg-tertiary);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

pre {
  background-color: var(--color-bg-tertiary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: var(--text-sm);
}

kbd {
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  font-size: 0.85em;
  box-shadow: 0 2px 0 var(--color-bg-secondary);
}

/* ========== Blockquotes ========== */
blockquote {
  border-left: 4px solid var(--color-rust);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

blockquote cite::before {
  content: "— ";
}

/* ========== Links Styled ========== */
.link {
  color: var(--color-rust-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}

.link:hover {
  color: var(--color-accent);
}

.link-subtle {
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.link-subtle:hover {
  color: var(--color-rust-light);
}

/* ========== Section Titles ========== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-code);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-rust);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-rust);
  border-radius: var(--radius-full);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  max-width: 60ch;
  line-height: var(--leading-relaxed);
}

/* ========== Responsive Typography ========== */
@media (max-width: 768px) {
  .section-title {
    font-size: var(--text-3xl);
  }

  .section-subtitle {
    font-size: var(--text-lg);
  }

  .lead {
    font-size: var(--text-lg);
  }
}