/* ============================================================
   typography.css — Sistema tipográfico Ilios Vounó
   Playfair Display (display) + Inter (body)
   ============================================================ */

/* ── Display — Playfair (serif elegante) ── */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* ── Section labels ── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-cyan-400);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--color-gray-400);
}

/* ── Body text ── */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--color-gray-400);
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-gray-400);
}

/* ── Nav link ── */
.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-out-quart);
}
.nav-link:hover, .nav-link.is-active { color: var(--color-white); }

/* ── Card title ── */
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
}

/* ── Modal title ── */
.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  line-height: var(--leading-tight);
}

/* ── Countdown numbers ── */
.countdown-number {
  font-family: var(--font-display);
  font-size: var(--text-countdown);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tightest);
  color: var(--color-white);
}

/* ── Spec label/value ── */
.spec-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.spec-value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-white);
}