/* ═══════════════════════════════════════════════════════════ */
/* FILE: styles/typography.css                                */
/* JURI PROJE — Interior Architecture                          */
/* Type system: Bebas Neue (display) + DM Mono (body)         */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Font Imports ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap');

/* ─── Display Headings ─────────────────────────────────────── */
.heading-hero {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, var(--text-2xl));
  line-height: var(--text-2xl-lh);
  letter-spacing: var(--text-2xl-ls);
  text-transform: uppercase;
  font-weight: 400;
}

.heading-section {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, var(--text-xl));
  line-height: var(--text-xl-lh);
  letter-spacing: var(--text-xl-ls);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-text-primary);
}

.heading-index {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, var(--text-3xl));
  line-height: var(--text-3xl-lh);
  letter-spacing: var(--text-3xl-ls);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-text-primary);
}

/* ─── Body Text ────────────────────────────────────────────── */
.body-text {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, var(--text-sm));
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-sm-ls);
  color: var(--color-text-muted);
}

/* ─── Caption ──────────────────────────────────────────────── */
.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: var(--text-xs-ls);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section-label {
  font-size: clamp(12px, 1.4vw, var(--text-md));
  line-height: var(--text-md-lh);
  letter-spacing: var(--text-md-ls);
}

/* ─── Label / Tag Typography ───────────────────────────────── */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  display: inline-block;
  color: var(--color-text-muted);
}