/* ==========================================================================
صَوْن · Sawn — typography system (DESIGN SYSTEM v2)
Owner: Agent I. Included by every template before app.css / landing.css.
The ONE Google Fonts request for the whole product. If a template prefers a
(lets the browser preconnect earlier), use exactly this URL and keep
the @import below (CSP style-src allows fonts.googleapis.com; fonts load from
fonts.gstatic.com). Never add a second families request anywhere else.
Roles (CONTRACT.md v2):
--font-ar-display Alexandria Arabic headlines, 500–800
--font-ar-text Vazirmatn Arabic body / UI, 300–700
--font-latin Manrope Latin UI / body / headlines, 400–800
--font-mono JetBrains Mono ciphertext, hashes, keys, code
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Vazirmatn:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
:root {
/* --- Families --------------------------------------------------------- */
--font-ar-display: "Alexandria", "Vazirmatn", "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
--font-ar-text: "Vazirmatn", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
--font-latin: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
/* Mixed-script stacks: Arabic pages fall through to the Latin face for
Latin runs (numbers, "AES-256-GCM"); Latin pages fall through to Arabic. */
--font-ui: var(--font-ar-text), var(--font-latin);
--font-display: var(--font-ar-display), var(--font-latin);
/* --- Fluid type scale (Major third-ish, 1.2 → 1.25 at wide) ----------------
Base 16 → 17px. Each step is clamp(min, preferred, max). */
--fs-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11 → 12 */
--fs-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); /* 12 → 13 */
--fs-sm: clamp(0.875rem, 0.85rem + 0.16vw, 0.9375rem); /* 14 → 15 */
--fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); /* 16 → 17 */
--fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20 */
--fs-lg: clamp(1.375rem, 1.22rem + 0.70vw, 1.625rem); /* 22 → 26 */
--fs-xl: clamp(1.75rem, 1.45rem + 1.30vw, 2.25rem); /* 28 → 36 */
--fs-2xl: clamp(2.25rem, 1.70rem + 2.40vw, 3.25rem); /* 36 → 52 */
--fs-3xl: clamp(2.875rem, 2.00rem + 3.90vw, 4.5rem); /* 46 → 72 */
/* --- Leading & measure ------------------------------------------------- */
--lh-tight: 1.15; /* Latin display */
--lh-snug: 1.3; /* Arabic display (ascenders + harakat need air) */
--lh-body: 1.6; /* Latin body */
--lh-ar: 1.85; /* Arabic body — Vazirmatn's tall loops and dots */
--measure: 62ch; /* ≈ 60–70 chars Latin; Arabic lines read best shorter */
--measure-ar: 48ch;
/* --- Tracking (Latin only; Arabic is NEVER letter-spaced) ------------- */
--ls-caps: 0.14em;
--ls-tight: -0.02em;
--ls-display: -0.03em;
--fw-light: 300; --fw-regular: 400; --fw-medium: 500;
--fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
}
/* ---------------------------------------------------------------------------
Base rendering
--------------------------------------------------------------------------- */
html {
font-family: var(--font-ui);
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none; /* never fake-bold Arabic */
}
html[lang^="en"], :lang(en) { font-family: var(--font-latin), var(--font-ar-text); }
html[lang^="ar"], :lang(ar) { font-family: var(--font-ar-text), var(--font-latin); }
body {
font-size: var(--fs-base);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
font-variant-numeric: proportional-nums;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* ---------------------------------------------------------------------------
Arabic-specific rules
Apply to any Arabic run: [lang="ar"], [dir="rtl"], or inherited from .
--------------------------------------------------------------------------- */
[lang="ar"], [dir="rtl"], :lang(ar) {
letter-spacing: 0 !important; /* kashida/joins break if spaced */
text-transform: none !important; /* uppercase has no meaning */
line-height: var(--lh-ar);
word-spacing: 0.04em;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1, "mark" 1, "mkmk" 1, "ccmp" 1;
text-align: start;
hyphens: none;
unicode-bidi: isolate;
}
[lang="ar"] :is(h1, h2, h3, h4, .t-display-ar),
[dir="rtl"] :is(h1, h2, h3, h4, .t-display-ar) {
line-height: var(--lh-snug);
font-feature-settings: "kern" 1, "liga" 1, "rlig" 1, "mark" 1, "mkmk" 1;
}
/* Numbers inside Arabic UI: Latin digits, aligned columns, no joining issues */
[lang="ar"] :is(td, th, time, .num, .t-num, output, [data-num]),
[dir="rtl"] :is(td, th, time, .num, .t-num, output, [data-num]) {
font-variant-numeric: tabular-nums lining-nums;
unicode-bidi: plaintext;
}
/* A Latin token (AES-256-GCM, SHA-256, an email) inside Arabic prose */
[lang="ar"] [lang="en"], [dir="rtl"] [dir="ltr"] {
unicode-bidi: isolate;
direction: ltr;
font-family: var(--font-latin), var(--font-ar-text);
letter-spacing: 0;
}
/* Latin inside an RTL page gets its own metrics back */
[dir="rtl"] :lang(en) { line-height: var(--lh-body); }
/* ---------------------------------------------------------------------------
Headings: Arabic display face on Arabic pages, Manrope on Latin pages
--------------------------------------------------------------------------- */
h1, h2, h3, h4, .t-display {
font-family: var(--font-latin), var(--font-ar-display);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
text-wrap: balance;
margin: 0;
}
:lang(ar) :is(h1, h2, h3, h4), [dir="rtl"] :is(h1, h2, h3, h4),
h1:lang(ar), h2:lang(ar), h3:lang(ar), h4:lang(ar) {
font-family: var(--font-ar-display), var(--font-latin);
letter-spacing: 0;
line-height: var(--lh-snug);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
p, li { max-inline-size: var(--measure); text-wrap: pretty; }
:lang(ar) :is(p, li), [dir="rtl"] :is(p, li) { max-inline-size: var(--measure-ar); }
small, .t-small { font-size: var(--fs-sm); }
.t-caption { font-size: var(--fs-xs); line-height: 1.45; }
/* ---------------------------------------------------------------------------
Utilities
--------------------------------------------------------------------------- */
/* Arabic hero / product-name display: Alexandria, heavy, with harakat air */
.t-display-ar {
font-family: var(--font-ar-display), var(--font-latin);
font-weight: var(--fw-extrabold);
font-size: var(--fs-3xl);
line-height: var(--lh-snug);
letter-spacing: 0;
direction: rtl;
unicode-bidi: isolate;
text-wrap: balance;
font-feature-settings: "kern" 1, "rlig" 1, "mark" 1, "mkmk" 1;
}
.t-display-ar--lg { font-size: var(--fs-2xl); }
.t-display-ar--md { font-size: var(--fs-xl); }
/* Latin display: Manrope, tight tracking */
.t-display {
font-family: var(--font-latin), var(--font-ar-display);
font-weight: var(--fw-extrabold);
font-size: var(--fs-3xl);
line-height: 1.02;
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.t-display--lg { font-size: var(--fs-2xl); }
.t-display--md { font-size: var(--fs-xl); line-height: var(--lh-tight); }
/* Tracked Latin caps — reserved for the "SAWN" brand word and tiny key labels */
.t-caps {
font-family: var(--font-latin);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
font-size: var(--fs-xs);
}
/* Ciphertext, hashes, nonces, key IDs, code */
.t-mono, code, kbd, samp, pre {
font-family: var(--font-mono);
font-weight: var(--fw-regular);
font-size: 0.92em;
font-variant-ligatures: none;
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: 0;
direction: ltr;
unicode-bidi: isolate;
overflow-wrap: anywhere;
}
pre { font-size: var(--fs-sm); line-height: 1.55; tab-size: 2; }
.t-mono--sm { font-size: var(--fs-xs); }
.t-mono--break { word-break: break-all; } /* long base64 ciphertext blocks */
/* Numbers that must line up (dashboards, tables, counters) */
.t-num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
/* Weight helpers */
.fw-light { font-weight: var(--fw-light); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }
/* Reduce font-loading layout shift: size-adjusted fallbacks for the two body faces */
@supports (size-adjust: 100%) {
@font-face {
font-family: "Vazirmatn Fallback";
src: local("Geeza Pro"), local("Segoe UI"), local("Tahoma");
size-adjust: 104%; ascent-override: 105%; descent-override: 45%;
}
@font-face {
font-family: "Manrope Fallback";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 98%; ascent-override: 95%; descent-override: 25%;
}
:root {
--font-ar-text: "Vazirmatn", "Vazirmatn Fallback", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
--font-latin: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, sans-serif;
}
}