/* ==========================================================================
   إتْمَام | ITMAM — typography.css
   نظام الخطوط والطباعة الهادئة (Japandi Quiet)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500&family=Reem+Kufi:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

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

/* =========================================
   العناوين — Japandi Quiet
   ========================================= */

h1, .itmam-hero-title {
  font-family: var(--font-arabic);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--sumi);
  margin-bottom: var(--space-md);
}

.itmam-page-title {
  font-family: var(--font-arabic);
  font-size: var(--fs-page-title);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--sumi);
  margin-bottom: var(--space-md);
}

h2, .itmam-section-title {
  font-family: var(--font-arabic);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--sumi);
  margin-bottom: var(--space-sm);
}

h3, .itmam-subsection {
  font-family: var(--font-body);
  font-size: var(--fs-subsection);
  font-weight: 500;
  line-height: var(--lh-subheading);
  color: var(--sumi);
  margin-bottom: var(--space-xs);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--sumi);
}

/* H1 لاتيني — Cormorant */
.itmam-hero-title--latin {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* =========================================
   النصوص
   ========================================= */

p, .itmam-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--stone);
}

.itmam-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.8;
  color: var(--sumi);
}

/* Labels — Space Mono uppercase */
.itmam-label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-block;
}

/* الأرقام */
.itmam-numeric, .stat-number, .counter-value {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  color: var(--sumi);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  display: inline-block;
}

/* Pull quote — Japandi */
.pull-quote {
  font-family: var(--font-arabic);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: 1.4;
  color: var(--sumi);
  border: none;
  padding: 0;
  margin-block: var(--space-2xl);
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
}

.pull-quote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--mist);
  margin-top: var(--space-lg);
}

/* Blockquote */
blockquote {
  font-family: var(--font-arabic);
  font-size: var(--fs-subsection);
  font-weight: 400;
  line-height: 1.6;
  color: var(--sumi);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--clay);
  margin-block: var(--space-lg);
  font-style: normal;
}

/* Links */
.itmam-link {
  color: var(--sumi);
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
  transition: color var(--duration-hover) var(--ease-out-expo),
              border-color var(--duration-hover) var(--ease-out-expo);
}

.itmam-link:hover {
  color: var(--clay);
  border-bottom-color: var(--sumi);
}