/* ═══════════════════════════════════════════════
   SOLAR SMART ADVISOR — TYPOGRAPHY
   typography.css
   All text styles. Arabic-first (Cairo font).
   Every class works in RTL and LTR contexts.
═══════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────── */
/* No hardcoded direction here — <html dir="rtl|ltr"> (set by I18n)
   drives it natively. A hardcoded value on body would silently override
   the attribute and break the language switch's RTL/LTR flip. */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
}

/* ── Display / Hero ──────────────────────── */
.text-display {
  font-size: clamp(28px, 7vw, 52px);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
}

.text-h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.text-h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* ── Body ────────────────────────────────── */
.text-body-lg {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.text-body {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.text-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* ── Labels / Utility ────────────────────── */
.text-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.text-number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.text-number-lg {
  font-size: clamp(36px, 10vw, 56px);
  font-weight: var(--weight-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Color Utilities ─────────────────────── */
.text-gold    { color: var(--color-gold); }
.text-muted   { color: var(--color-text-muted); }
.text-bone    { color: var(--color-text-bone); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }

/* ── Gradient Text ───────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-bone) 60%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Alignment ───────────────────────────── */
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* ── Weight Utilities ────────────────────── */
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.font-extrabold{ font-weight: var(--weight-extrabold); }
.font-black    { font-weight: var(--weight-black); }

/* ── Eyebrow Label ───────────────────────── */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
}