/* PrintFire — Typography tokens Direction-aware: the same --font-display / --font-body variables resolve to Latin families by default and swap to Arabic families under [dir="rtl"] or [lang="ar"]. Set one attribute on and the whole system follows. */ :root { /* Family stacks */ --font-latin-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-latin-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --font-arabic-display: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif; --font-arabic-body: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', sans-serif; /* Active families (Latin by default) */ --font-display: var(--font-latin-display); --font-body: var(--font-latin-body); /* Type scale (desktop) */ --fs-display: clamp(2.75rem, 5vw, 4.25rem); /* @kind font */ --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.25rem; /* hero subtext / intros */ --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-eyebrow: 0.8125rem; /* uppercase labels */ /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ --fw-black: 900; /* @kind font */ /* Line heights */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* Tracking */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-eyebrow: 0.14em; /* @kind font */ } /* Arabic / RTL family swap */ [lang="ar"], [dir="rtl"] { --font-display: var(--font-arabic-display); --font-body: var(--font-arabic-body); --ls-tight: 0; /* @kind font */ /* Arabic display reads better without negative tracking */ --lh-tight: 1.2; /* @kind font */ /* Arabic needs more leading */ --lh-snug: 1.4; /* @kind font */ } /* Utility helpers (optional, for specimen cards & quick markup) */ .pf-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .pf-eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); } [dir="rtl"] .pf-eyebrow { letter-spacing: 0.04em; }