/* ============================================================
   TYPOGRAPHY — Pack2Door
   Type scale, font loading, and text utilities
   ============================================================ */

/* ── Font Loading ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');

/* ── Base Body ───────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-optical-sizing: auto;
}

/* ── Headings ────────────────────────────────────────────── */
.h1, h1 {
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
}

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

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

.h4, h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.h5, h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.h6, h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* ── Display / Hero Headings ─────────────────────────────── */
.display-xl {
  font-size: clamp(2.75rem, 5vw + 1rem, var(--text-7xl));
  font-weight: var(--font-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-tightest);
}

.display-lg {
  font-size: clamp(2.25rem, 4vw + 0.75rem, var(--text-6xl));
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
}

.display-md {
  font-size: clamp(1.75rem, 3vw + 0.5rem, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

/* ── Section Labels ──────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

/* ── Body Text Variants ──────────────────────────────────── */
.body-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

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

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

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

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

/* ── Text Color Utilities ────────────────────────────────── */
.text-primary    { color: var(--color-text); }
.text-secondary  { color: var(--color-text-secondary); }
.text-muted      { color: var(--color-text-muted); }
.text-subtle     { color: var(--color-text-subtle); }
.text-inverse    { color: var(--color-text-inverse); }
.text-brand      { color: var(--color-primary); }
.text-accent     { color: var(--color-accent); }
.text-success    { color: var(--color-success); }

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

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

/* ── Links ───────────────────────────────────────────────── */
.link {
  color: var(--color-primary);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}