/* ============================================================================ SRH ALOQOD — صرح العقود للعقارات typography.tokens.css · typography layer ---------------------------------------------------------------------------- Independent of the colour layers. This file declares NO colour: type roles set family, size, weight, leading and tracking only; colour arrives from tokens.css / components.tokens.css. Provenance is marked on every group: [INHERITED] already approved in the design system — reproduced verbatim [DERIVED] built here from what the font files actually contain [GUARD] a restriction required by the script, not a style choice Governing rule — bar.md M11: at most TWO families and THREE sizes in any single composition. This file supplies the vocabulary; M11 limits how much of it may appear at once. ========================================================================= */ :root { /* ========================================================================== 1 · FONT FAMILY [INHERITED — ds/tokens/typography.css] Five families, unchanged. bar.md M11 keeps Thmanyah Sans in the system pending its two trial roles, so --font-editorial-alt is retained. ====================================================================== */ --font-editorial: 'Thmanyah Serif Display', 'Thmanyah Sans', serif; --font-editorial-alt: 'Thmanyah Sans', sans-serif; --font-body: 'IBM Plex Sans Arabic', sans-serif; --font-display-1: 'The Year of Handicrafts', sans-serif; --font-display-2: 'The Year of The Camel', sans-serif; /* ========================================================================== 2 · FONT SIZE [INHERITED — ten steps, unchanged] ====================================================================== */ --text-6xl: 4.5rem; /* 72px */ --text-5xl: 3.25rem; /* 52px */ --text-4xl: 2.5rem; /* 40px */ --text-3xl: 1.75rem; /* 28px */ --text-2xl: 1.375rem; /* 22px */ --text-xl: 1.125rem; /* 18px */ --text-lg: 1rem; /* 16px */ --text-md: 0.9375rem; /* 15px */ --text-sm: 0.8125rem; /* 13px */ --text-xs: 0.6875rem; /* 11px */ /* ========================================================================== 3 · FONT WEIGHT [DERIVED — from the shipped font files] Only weights that exist as real files are named, so nothing here can be synthesised by the browser. IBM Plex Sans Arabic 100 200 300 400 500 600 700 Thmanyah Serif Display 300 400 500 700 900 Thmanyah Sans 300 400 500 700 900 600 does NOT exist in the editorial families — see --weight-semibold. ====================================================================== */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* body family only — editorial has no 600 file */ --weight-bold: 700; --weight-black: 900; /* editorial and display families only */ /* ========================================================================== 4 · LINE HEIGHT [INHERITED] The normal and relaxed steps are already generous, which Arabic needs: ascenders, descenders and vowel marks occupy more vertical space than Latin at the same size. ====================================================================== */ --leading-tight: 1.08; /* display only — too tight for running Arabic */ --leading-snug: 1.28; /* headings */ --leading-normal: 1.55; /* interface text */ --leading-relaxed: 1.75; /* long-form Arabic reading */ /* ========================================================================== 5 · LETTER SPACING [INHERITED + GUARD] Arabic is a joined script: positive tracking severs the connections and renders words as loose disconnected letters. The wide steps are therefore Latin-only, and no Arabic role below uses them. ====================================================================== */ --tracking-tight: -0.01em; /* large Latin display only */ --tracking-normal: 0; /* every Arabic role */ --tracking-wide: 0.04em; /* LATIN ONLY */ --tracking-wider: 0.12em; /* LATIN ONLY — overline / small caps */ /* ========================================================================== 6 · SEMANTIC TYPOGRAPHY ROLES [DERIVED] Each role names family, size, weight, leading and tracking. Every value points at a primitive above; no role introduces a raw number. ====================================================================== */ /* --- display · editorial voice, campaign and cover use ---------------- */ --type-display-font: var(--font-editorial); --type-display-size: var(--text-6xl); --type-display-weight: var(--weight-bold); --type-display-leading: var(--leading-tight); --type-display-tracking: var(--tracking-normal); /* --- heading 1 --------------------------------------------------------- */ --type-h1-font: var(--font-editorial); --type-h1-size: var(--text-5xl); --type-h1-weight: var(--weight-bold); --type-h1-leading: var(--leading-tight); --type-h1-tracking: var(--tracking-normal); /* --- heading 2 --------------------------------------------------------- */ --type-h2-font: var(--font-editorial); --type-h2-size: var(--text-4xl); --type-h2-weight: var(--weight-medium); --type-h2-leading: var(--leading-snug); --type-h2-tracking: var(--tracking-normal); /* --- heading 3 · switches to the body family: at this size the editorial face loses its stroke contrast and reads muddy in interfaces ------ */ --type-h3-font: var(--font-body); --type-h3-size: var(--text-3xl); --type-h3-weight: var(--weight-semibold); --type-h3-leading: var(--leading-snug); --type-h3-tracking: var(--tracking-normal); /* --- body -------------------------------------------------------------- */ --type-body-font: var(--font-body); --type-body-size: var(--text-lg); --type-body-weight: var(--weight-regular); --type-body-leading: var(--leading-relaxed); --type-body-tracking: var(--tracking-normal); /* --- body-small -------------------------------------------------------- */ --type-body-sm-font: var(--font-body); --type-body-sm-size: var(--text-md); --type-body-sm-weight: var(--weight-regular); --type-body-sm-leading: var(--leading-normal); --type-body-sm-tracking: var(--tracking-normal); /* --- label · field labels and table headers ---------------------------- */ --type-label-font: var(--font-body); --type-label-size: var(--text-md); --type-label-weight: var(--weight-medium); --type-label-leading: var(--leading-normal); --type-label-tracking: var(--tracking-normal); /* --- button ------------------------------------------------------------ */ --type-button-font: var(--font-body); --type-button-size: var(--text-lg); --type-button-weight: var(--weight-semibold); --type-button-leading: var(--leading-normal); --type-button-tracking: var(--tracking-normal); /* --- input · matches body so typed text never reflows on focus --------- */ --type-input-font: var(--font-body); --type-input-size: var(--text-lg); --type-input-weight: var(--weight-regular); --type-input-leading: var(--leading-normal); --type-input-tracking: var(--tracking-normal); /* --- link · identical metrics to body; only colour and underline differ */ --type-link-font: var(--font-body); --type-link-size: var(--text-lg); --type-link-weight: var(--weight-regular); --type-link-leading: var(--leading-relaxed); --type-link-tracking: var(--tracking-normal); /* --- helper · assistive text under a field ----------------------------- */ --type-helper-font: var(--font-body); --type-helper-size: var(--text-sm); --type-helper-weight: var(--weight-regular); --type-helper-leading: var(--leading-normal); --type-helper-tracking: var(--tracking-normal); /* --- caption · image and table captions -------------------------------- */ --type-caption-font: var(--font-body); --type-caption-size: var(--text-xs); --type-caption-weight: var(--weight-regular); --type-caption-leading: var(--leading-normal); --type-caption-tracking: var(--tracking-normal); /* --- overline · LATIN ONLY. The wide tracking that gives this role its character would break Arabic joining, so Arabic overlines fall back to the label role instead. Enforced by .srh-overline:lang(ar). ---- */ --type-overline-font: var(--font-body); --type-overline-size: var(--text-xs); --type-overline-weight: var(--weight-medium); --type-overline-leading: var(--leading-normal); --type-overline-tracking: var(--tracking-wider); /* --- figure · the property number itself (bar.md M9) ------------------- M9 requires numeral:label >= 2.5:1. 2.5rem / 0.9375rem = 2.67. */ --type-figure-font: var(--font-body); --type-figure-size: var(--text-4xl); --type-figure-weight: var(--weight-semibold); --type-figure-leading: var(--leading-tight); --type-figure-tracking: var(--tracking-normal); /* --- figure-label · the caption above the number ----------------------- */ --type-figure-label-font: var(--font-body); --type-figure-label-size: var(--text-md); --type-figure-label-weight: var(--weight-regular); --type-figure-label-leading: var(--leading-normal); --type-figure-label-tracking: var(--tracking-normal); /* ========================================================================== 7 · NUMERALS [GUARD] Figures, prices and tables must align column to column; proportional digits would ragged the right edge of any price list. ====================================================================== */ --numeric-tabular: tabular-nums; /* @kind other */ --numeric-proportional: proportional-nums; /* @kind other */ } /* ============================================================================ SCRIPT GUARDS Behaviour the Arabic script requires, not stylistic preference. ========================================================================= */ /* Arabic never carries positive tracking: it severs the joins. */ :where([lang="ar"], [dir="rtl"]) { letter-spacing: var(--tracking-normal); } /* An Arabic overline drops the wide tracking and takes the label metrics. */ .srh-overline:lang(ar) { font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--tracking-normal); } /* Figures and tabular data align on the digit. */ .srh-figure, .srh-table-cell, :where(input[type="number"], input[inputmode="numeric"]) { font-variant-numeric: var(--numeric-tabular); font-feature-settings: "tnum" 1; } /* ============================================================================ GUARD RAILS ---------------------------------------------------------------------------- · No colour in this file. Colour comes from the colour layers. · bar.md M11 stands: at most two families and three sizes per composition. · --tracking-wide and --tracking-wider are Latin-only. Never on Arabic. · --weight-semibold (600) has no file in the editorial or display families; use --weight-medium or --weight-bold there, or the browser will fake it. · --leading-tight is for display sizes only; running Arabic needs --leading-normal at minimum and --leading-relaxed for long form. · Font loading (@font-face) already exists in the design system bundle and is deliberately not repeated here. · Spacing, elevation, motion and layout remain out of scope. · This file has no effect on the frozen SRH ALOQOD master logotype. ========================================================================= */