Typography system

Token-only typography. Every heading and body paragraph uses a named class. Raw `text-Xxl` Tailwind utilities are banned from production templates — the tokens enforce the editorial scale, the clamp() values, and the AR adjustments in one place.

Type scale tokens

.t-hero-h1

Home/landing hero titles. clamp(2rem, 1.5rem + 2.8vw, 3.75rem). Mobile: 32px. Large desktop: 60px. Tight line-height 1.1 on mobile.

.t-page-h1

Page-level titles (detail pages, listings). clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem). Mobile: 28px. Desktop: 44px.

.t-section-h2

In-page section heading. clamp(1.5rem, 1.25rem + 1vw, 2rem). Mobile: 24px. Desktop: 32px.

.t-card-h3

Card titles. 18-20px range. Always paired with 2-line clamp on listing cards.

.t-body-lg

Lede paragraph after hero. ~1.0625rem with 1.55 leading. Tightens to 1rem on mobile via §15 polish layer.

.t-body

Body prose. 1rem / 1.6 leading. Goes to 0.9375rem / 1.5 on mobile.

.t-body-sm

Secondary copy. 0.875rem. Used for descriptions, supporting text, card metadata.

.t-meta

Tiny mono uppercase metadata: badges, eyebrows, status chips. 11px, 0.10em tracking, weight 700.

Arabic adjustments

Arabic uses a slightly tighter clamp() ladder because Arabic letterforms read denser per character. Hero and body tokens auto-adjust under `[dir="rtl"]` — do not author Arabic-specific overrides per page.