/* ============================================================
   03 — BASE
   Font loading, document defaults, text utilities.
   ============================================================ */

/* The @font-face lives in 00-font.css (generated, embedded as a
   data URI so the page works when opened straight from disk). */

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------
   RTL TYPOGRAPHY

   Persian letterforms connect to their neighbours. Any positive
   letter-spacing breaks the joins and makes text look shattered,
   so tracking is 0 everywhere by default — the reference design's
   `tracking-wider` / `tracking-widest` cannot be applied to
   Persian text at all. Only isolated Latin runs opt back in via
   `.u-latin`.
   ------------------------------------------------------------ */

body,
body * {
  letter-spacing: 0;
}

/* Latin / numeric runs inside RTL text.
   `unicode-bidi: isolate` keeps "500+" from rendering as "+500". */
.u-latin {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-latin);
  line-height: var(--lh-tight);
}

/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */

/* ---- ink padding ----------------------------------------------
   At display sizes the glyph ink is taller than the line box, so
   the box does not contain what it paints. That matters twice:
   background-clip:text cuts the overflow off, and neighbouring
   elements lay out against a box that lies about its size.

   Each display class declares how much slack it needs; one shared
   rule applies it. Using a custom property (rather than each class
   setting padding-block) keeps the result independent of source
   order when classes are combined, e.g. `u-numeral u-grad`.

   Values measured against Vazirmatn 900, not guessed.
   ---------------------------------------------------------------- */

.u-display,
.section__title,
.u-numeral,
.u-grad {
  padding-block: var(--ink-pad, 0.12em);
}

.u-display,
.section__title {
  --ink-pad: 0.12em;
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

/* Numerals rendered as graphics: 500+, 50+, 01..05.
   Latin digits sit high in the em box, so at tight leading they
   need more slack than Persian text does. */
.u-numeral {
  --ink-pad: 0.18em;
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: var(--fw-black);
  font-size: var(--fs-number);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

/* The signature gradient text. Deliberately declares no --ink-pad:
   it takes the slack from whichever display class it is combined
   with (`u-numeral u-grad` -> 0.18em) and falls back to 0.12em
   when used on its own. Declaring one here would win by source
   order and silently under-pad the numerals. */
.u-grad {
  background-image: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ------------------------------------------------------------
   TEXT HELPERS
   ------------------------------------------------------------ */

.u-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.u-dim   { color: var(--c-text-dim); }
.u-light { font-weight: var(--fw-light); }

.u-measure {
  max-width: var(--w-narrow);
  margin-inline: auto;
}

/* Screen-reader only */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   INTERACTION

   The focus ring lives in 02-reset.css with the other element
   defaults. It was declared in both files with different values;
   this one loaded later and silently won, so the reset's was dead
   code pretending to be the source of truth.
   ------------------------------------------------------------ */

::selection {
  background: var(--c-text);
  color: var(--c-bg);
}