/* ============================================
   TRAVVANA — Typography
   ============================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

body {
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--clr-text-primary);
  letter-spacing: var(--ls-normal);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6,
.section-title {
  font-family: var(--ff-display);
}

.heading-1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.heading-2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.heading-3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.heading-4 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.heading-5 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.heading-6 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* ── Body Text ── */
.text-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.text-base {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.text-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.text-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* ── Text Colors ── */
.text-primary   { color: var(--clr-text-primary); }
.text-secondary { color: var(--clr-text-secondary); }
.text-muted     { color: var(--clr-text-muted); }
.text-accent    { color: var(--clr-accent); }

/* ── Text Utilities ── */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

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

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

/* ── Section Title Pattern ── */
.section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
  margin-bottom: var(--sp-2);
}

.section-subtitle {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-6);
}

/* ── Label ── */
.label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--clr-text-muted);
}

/* ── Responsive Typography ── */
@media (min-width: 768px) {
  .heading-1 { font-size: calc(var(--fs-5xl) * 1.15); }
  .heading-2 { font-size: calc(var(--fs-4xl) * 1.15); }
  .heading-3 { font-size: calc(var(--fs-3xl) * 1.15); }
  .section-title { font-size: calc(var(--fs-2xl) * 1.15); }
}