/* NTIS typography. One family, Tajawal, for Arabic and Latin alike. Sizes are desktop values; the media blocks at the end step them down for tablet (≤1023) and mobile (≤767). Fixed-size canvases (specimen cards, slides, posts) set data-ntis-static on to pin the desktop scale. */ :root{ --font-core: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Utility only — code, keys, hashes. Never for brand copy. */ --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --w-extralight: 200; /* @kind font */ --w-light: 300; /* @kind font */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-bold: 700; /* @kind font */ --w-extrabold: 800; /* @kind font */ --w-black: 900; /* @kind font */ --fs-display-1: 56px; --fs-display-2: 44px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 11px; /* Arabic ascenders/descenders collide below 1.7 in running text. */ --lh-display: 1.15; /* @kind other */ --lh-heading: 1.3; /* @kind other */ --lh-snug: 1.5; /* @kind other */ --lh-body: 1.7; /* @kind other */ --lh-loose: 1.9; /* @kind other */ /* Arabic is cursive: never track it. --ls-wide is for Latin eyebrows only. */ --ls-none: 0; /* @kind other */ --ls-display: -0.01em; /* @kind other */ --ls-wide: 0.08em; /* @kind other */ --type-display-1: var(--w-bold) var(--fs-display-1)/var(--lh-display) var(--font-core); --type-display-2: var(--w-bold) var(--fs-display-2)/var(--lh-display) var(--font-core); --type-h1: var(--w-bold) var(--fs-h1)/var(--lh-heading) var(--font-core); --type-h2: var(--w-bold) var(--fs-h2)/var(--lh-heading) var(--font-core); --type-h3: var(--w-medium) var(--fs-h3)/var(--lh-heading) var(--font-core); --type-h4: var(--w-medium) var(--fs-h4)/var(--lh-snug) var(--font-core); --type-body-lg: var(--w-regular) var(--fs-body-lg)/var(--lh-body) var(--font-core); --type-body: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-core); --type-body-sm: var(--w-regular) var(--fs-body-sm)/var(--lh-snug) var(--font-core); --type-label: var(--w-medium) var(--fs-body-sm)/var(--lh-snug) var(--font-core); --type-caption: var(--w-regular) var(--fs-caption)/var(--lh-snug) var(--font-core); --type-eyebrow: var(--w-bold) var(--fs-micro)/1.4 var(--font-core); } /* Tablet & small laptop */ @media (max-width: 1023px){ :root{ --fs-display-1: 44px; --fs-display-2: 36px; --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; } } /* Mobile. Body stays 16px — it is the floor for Arabic legibility. */ @media (max-width: 767px){ :root{ --fs-display-1: 34px; --fs-display-2: 30px; --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 19px; --fs-h4: 17px; --fs-body-lg: 17px; } } /* Marketing & editorial pages read, they don't scan: running text steps up to body-lg (18 desktop, 17 mobile) and small text to 16. Product UI — console, tables, dense forms — stays at 16 / 14. Set data-ntis-surface="marketing" on the page (or a region) to switch. */ [data-ntis-surface="marketing"]{ --type-body: var(--w-regular) var(--fs-body-lg)/var(--lh-body) var(--font-core); --type-body-sm: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-core); } /* Fixed-size canvases (specimen cards, slides, posts) pin the desktop scale, whatever the width of the frame they are previewed in. */ [data-ntis-static]{ --fs-display-1: 56px; --fs-display-2: 44px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 18px; }