/* ==========================================================================
   TYPOGRAPHY — Rumit Walia Portfolio
   Fluid type scale, heading styles, editorial prose, and text utilities
   ========================================================================== */

/* ── 1. Headings & Display Types ────────────────────────────────────────── */

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.1);
  letter-spacing: var(--ls-tight, -0.02em);
  color: var(--color-navy, #1a1f3a);
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.15);
  letter-spacing: var(--ls-tight, -0.015em);
  color: var(--color-navy, #1a1f3a);
  text-wrap: balance;
}

h1,
.h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-snug, 1.25);
  letter-spacing: var(--ls-tight, -0.01em);
  color: var(--color-navy, #1a1f3a);
  text-wrap: balance;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-snug, 1.3);
  color: var(--color-navy, #1a1f3a);
  text-wrap: balance;
}

h3,
.h3 {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-snug, 1.35);
  color: var(--color-text, #1a1a1a);
}

h4,
.h4 {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-normal, 1.4);
  color: var(--color-text, #1a1a1a);
}

/* ── 2. Body Text Scale ────────────────────────────────────────────────── */

.lead,
.body-lg {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: var(--lh-relaxed, 1.7);
  color: var(--color-text-secondary, #4a4a4a);
  max-width: 68ch;
}

.body {
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-normal, 1.6);
  color: var(--color-text, #1a1a1a);
  max-width: 68ch;
}

.body-sm {
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-normal, 1.5);
  color: var(--color-text-secondary, #4a4a4a);
}

/* ── 3. Small Text, Labels & Captions ──────────────────────────────────── */

.caption {
  font-size: var(--fs-small, 0.875rem);
  color: var(--color-text-tertiary, #777777);
  line-height: var(--lh-normal, 1.4);
}

.label {
  font-size: var(--fs-label, 0.75rem);
  font-weight: var(--fw-medium, 500);
  letter-spacing: var(--ls-wider, 0.08em);
  text-transform: uppercase;
  color: var(--color-text-secondary, #4a4a4a);
}

.overline {
  display: inline-block;
  font-size: var(--fs-label, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-widest, 0.12em);
  text-transform: uppercase;
  color: var(--color-plum, #7d4e7f);
  margin-bottom: var(--spacing-xs, 0.5rem);
}

/* ── 4. Links & Interactive States ─────────────────────────────────────── */

.link {
  color: var(--color-teal, #2a9d8f);
  text-decoration: none;
  transition: color var(--duration-fast, 0.2s) var(--ease-out, ease-out);
  position: relative;
}

.link:hover {
  color: var(--color-teal-dark, #1f7267);
}

.link--underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link--underline:hover {
  text-decoration-thickness: 2px;
}

.link--animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-teal, #2a9d8f);
  transition: width var(--duration-base, 0.3s) var(--ease-out, ease-out);
}

.link--animated:hover::after {
  width: 100%;
}

/* ── 5. Prose (Long-Form Editorial Formatting) ─────────────────────────── */

.prose {
  font-size: clamp(1rem, 1.75vw, 1.125rem);
  line-height: var(--lh-relaxed, 1.72);
  color: var(--color-text-secondary, #4a4a4a);
  max-width: 72ch;
}

.prose p {
  margin-bottom: var(--spacing-lg, 1.5rem);
  text-align: left;
}

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

.prose strong {
  font-weight: var(--fw-semibold, 600);
  color: var(--color-navy, #1a1f3a);
}

.prose em {
  font-style: italic;
}

.prose a {
  color: var(--color-teal, #2a9d8f);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast, 0.2s) var(--ease-out, ease-out),
    text-decoration-thickness var(--duration-fast, 0.2s) var(--ease-out, ease-out);
}

.prose a:hover {
  color: var(--color-teal-dark, #1f7267);
  text-decoration-thickness: 2px;
}

.prose ul,
.prose ol {
  margin: var(--spacing-lg, 1.5rem) 0;
  padding-left: var(--spacing-xl, 2rem);
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: var(--spacing-xs, 0.5rem);
  line-height: var(--lh-relaxed, 1.65);
}

.prose blockquote {
  border-left: 3px solid var(--color-plum, #7d4e7f);
  padding-left: var(--spacing-lg, 1.5rem);
  margin: var(--spacing-xl, 2rem) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3, 1.35rem);
  font-style: italic;
  color: var(--color-navy, #1a1f3a);
  line-height: var(--lh-relaxed, 1.6);
}

/* ── 6. Monospace & Code Formatting ────────────────────────────────────── */

code,
.code {
  font-family: var(--font-mono, monospace);
  font-size: 0.88em;
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-navy, #1a1f3a);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border-light, #e5e5e5);
}

/* ── 7. Text Utility Classes ───────────────────────────────────────────── */

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

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

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

.text-plum {
  color: var(--color-plum, #7d4e7f);
}

.text-teal {
  color: var(--color-teal, #2a9d8f);
}

.text-navy {
  color: var(--color-navy, #1a1f3a);
}

.text-muted {
  color: var(--color-text-tertiary, #777777);
}

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

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

.fw-normal {
  font-weight: var(--fw-normal, 400);
}

.fw-medium {
  font-weight: var(--fw-medium, 500);
}

.fw-semibold {
  font-weight: var(--fw-semibold, 600);
}

.fw-bold {
  font-weight: var(--fw-bold, 700);
}