/* ==========================================================================
   نَبْض | NABD — Kinetic Interior Design
   ملف: /css/typography.css
   نظام الخطوط والتايبوجرافي (Cairo Variable + IBM Plex + Space Grotesk)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap");

/* منع letter-spacing على النص العربي */
body, h1, h2, h3, h4, h5, h6, p, span, blockquote, a, li, td, th {
  letter-spacing: 0;
}

/* العناوين الرئيسية — Cairo Variable + وزن ثقيل */
h1, .editorial-hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  font-variation-settings: "wght" 800;
  line-height: var(--lh-tight);
  color: var(--jet);
  margin-bottom: var(--space-md);
}

.editorial-page-title {
  font-family: var(--font-heading);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  color: var(--jet);
  margin-bottom: var(--space-md);
}

/* عناوين الأقسام */
h2, .editorial-section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  font-variation-settings: "wght" 700;
  line-height: var(--lh-heading);
  color: var(--jet);
  margin-bottom: var(--space-sm);
}

h3, .editorial-subsection {
  font-family: var(--font-subheading);
  font-size: var(--fs-subsection);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subheading);
  color: var(--jet);
  margin-bottom: var(--space-xs);
}

h4, h5, h6 {
  font-family: var(--font-subheading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--jet);
}

/* النصوص */
p, .editorial-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  color: var(--ink);
}

.editorial-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-normal);
  line-height: 1.65;
  color: var(--jet);
}

/* labels صغيرة — Space Grotesk */
.editorial-label, .editorial-tag, .eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acid);
  display: inline-block;
}

/* الأرقام الضخمة — Space Grotesk */
.editorial-numeric, .stat-number, .counter-value, .huge-number {
  font-family: var(--font-numeric);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 0.9;
  color: var(--jet);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  display: inline-block;
}

/* Marquee */
.marquee-text {
  font-family: var(--font-heading);
  font-size: var(--fs-marquee);
  font-weight: var(--fw-bold);
  font-variation-settings: "wght" 700;
  line-height: 1;
  white-space: nowrap;
}

/* Pull quote — Cairo bold */
.pull-quote {
  font-family: var(--font-heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  font-variation-settings: "wght" 700;
  line-height: 1.2;
  color: var(--jet);
  padding-right: var(--space-lg);
  border-right: 6px solid var(--acid);
  margin-block: var(--space-2xl);
}

.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  font-style: normal;
  color: var(--graphite);
  margin-top: var(--space-sm);
}

/* Weight morphing animation preparation */
[data-weight-morph] {
  transition: font-variation-settings 80ms linear;
}

[data-weight-morph] span {
  font-variation-settings: "wght" 500;
  transition: font-variation-settings 80ms linear;
  display: inline-block;
}