/* ============================================================ WSOOL — DESIGN TOKENS Single source of truth for colour, type, space, radius, motion. Nothing below this file may hardcode a colour or a spacing value. WP mapping: this file maps 1:1 onto theme.json → settings.color.palette ← the --c-* block settings.typography.* ← the --fs-* / --lh-* block settings.spacing.spacingSizes ← the --sp-* block settings.custom.* ← radius / shadow / motion Keeping it isolated is what makes the WordPress port mechanical. ============================================================ */ :root{ /* ── Ink & surface ─────────────────────────────────────── */ --ink:#17262d; /* headings, primary text */ --ink-deep:#102027; /* the single dark cinematic chapter, footer */ --text:#586970; /* body copy — 5.3:1 on canvas */ --muted:#5f7075; /* meta, captions — 4.8:1 on canvas (AA) */ --canvas:#f4f7f3; /* page background */ --paper:#fff; /* raised surfaces */ --line:#dbe2de; /* hairlines */ --line-strong:#c3cfc8; /* input borders — 3:1 against paper (AA UI) */ /* ── Coral — the single accent, in three accessible steps ── Never use --coral for text under 24px. The contrast ladder: --coral 3.2:1 on canvas → large display type + graphics only --coral-deep 4.6:1 on white → hover fill --coral-ink 5.6:1 on canvas, 6.1:1 on white → small text + button fill This is the fix for the old #ed6545-on-white buttons, which were 3.2:1 and failed AA for the 15px label sitting on them. */ --coral:#e85c3c; --coral-lift:#f7913f; /* DARK surfaces only — 7.2:1 on --ink-deep where --coral manages 4.8:1. On canvas it is 2.1:1, so it must never appear on a light ground. */ --coral-deep:#cf4526; --coral-ink:#b03a20; --coral-press:#8f2e19; --peach:#ffe7de; --peach-soft:#fff4ef; /* ── Status ────────────────────────────────────────────── These carry a verdict, so none of them may be confusable with the brand accent. --danger used to be #992d22, which sat 5° of hue from --coral-ink #b03a20: a form error on this site was rendered in what the eye reads as the brand colour. Red now sits at hue 0, ~11° off the accent and 20°+ off the accent's dark step, which is the separation that lets it mean "stop". Colour is never the only signal — an error also gets text and aria-invalid, a rejected item also gets a ✕. */ --good:#1d7a52; --good-soft:#e9f5ef; --good-lift:#4ec08c; /* on dark */ --bad:#c62828; --bad-soft:#fdecec; --bad-ink:#a51f1f; --warn:#8a5a12; --warn-soft:#fdf6e8; /* ── On-dark (the story chapter + footer) ──────────────── */ --on-dark:#fff; --on-dark-soft:rgba(255,255,255,.72); /* 8.9:1 on --ink-deep */ --on-dark-mute:rgba(255,255,255,.56); /* captions only */ --on-dark-line:rgba(255,255,255,.14); /* ── Type scale — fluid, 1.25 minor third ──────────────── */ --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif; --fs-display:clamp(44px,6vw,88px); --fs-h1:clamp(38px,5vw,68px); --fs-h2:clamp(30px,3.6vw,52px); --fs-h3:clamp(21px,2vw,29px); --fs-h4:clamp(17px,1.4vw,20px); --fs-lead:clamp(17px,1.6vw,21px); --fs-body:17px; --fs-sm:15.5px; --fs-xs:13.5px; --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.75; /* ── Editorial reading scale — inner pages ─────────────── A second, larger scale for pages whose job is to be *read*: solutions, industries, process, about. The marketing scale above is sized for scanning next to imagery; at 14-15.5px it is too small for continuous Arabic prose. Arabic needs more size and more leading than Latin at the same perceived weight — the letterforms connect, the effective x-height is low against the em, and ascender/descender travel is long — so 15px Latin body copy reads roughly like 13px Arabic. Every value is a 390px → 1440px ramp, so the phone gets the size it needs first and the desktop follows the same curve instead of being designed separately. --fs-section deliberately sits far BELOW --fs-display: an inner-page section heading that outsizes its own

is the thing that made these pages feel like a deck of posters rather than a document. */ --fs-read:clamp(18px,17.44px + .143vw,19.5px); /* body copy */ --fs-read-sm:clamp(16.5px,16.13px + .095vw,17.5px); /* secondary prose */ --fs-deck:clamp(19px,17.9px + .28vw,23px); /* hero deck */ --fs-lede:clamp(21px,19.14px + .476vw,26px); /* the direct answer */ --fs-sub:clamp(19px,17.89px + .286vw,22px); /* component sub-heads */ --fs-section:clamp(27px,21.43px + 1.428vw,42px); /* inner-page

*/ --lh-read:1.75; --lh-lede:1.5; --lh-sub:1.3; /* The reading column. 820px at --fs-read's 19.5px cap is the same measure, in ems, as the site's existing 760px/17px article column — so the two never disagree about what a comfortable line looks like. */ --wrap-read:min(820px,calc(100% - 40px)); --section-y-read:clamp(48px,37.58px + 2.67vw,76px); /* ── Display leading — SCRIPT-DEPENDENT ────────────────── Latin display type sits happily at ~1.0: the x-height is low and nothing reaches far past the baseline. Arabic does not work that way. ا ل ك أ climb high, ج ح خ ع م ن ي س ص ق drop deep, and hamza/madda add another storey on top — so at 1.0 the descenders of one line collide with the ascenders of the next. Every display rule reads its leading from these variables, and [dir="rtl"] loosens them below, so one stylesheet can set tight Latin display and legible Arabic display without either script paying for the other. */ --lh-display:.99; --lh-h1:1.02; --lh-h2:1.06; --lh-h3:1.2; --lh-hero:1.0; /* ── Letter-spacing — LATIN ONLY ──────────────────────── Arabic letterforms connect; tracking (positive or negative) breaks the joins and degrades legibility. Every rule in this codebase reads tracking from these variables, and [dir="rtl"] zeroes them below — so no Arabic text can ever pick up letter-spacing by accident. */ --track-display:-.035em; --track-tight:-.015em; --track-wide:.12em; /* ── Spacing — 8px base ────────────────────────────────── */ --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px; --section-y:clamp(80px,9vw,140px); --section-y-sm:clamp(56px,6vw,88px); --wrap:min(1280px,calc(100% - 48px)); --wrap-narrow:min(760px,calc(100% - 48px)); /* The header floats clear of the page edge, so the space it occupies is the bar itself plus the gap above it. Everything that clears the header — scroll padding, hero top padding, sticky offsets — reads --header-h. */ --header-bar:64px; --header-inset:14px; --header-h:calc(var(--header-bar) + var(--header-inset)); /* ── Radius ────────────────────────────────────────────── */ --radius:24px; --radius-sm:14px; --radius-xs:10px; --radius-pill:999px; /* ── Elevation ─────────────────────────────────────────── */ --shadow-sm:0 2px 8px rgba(23,38,45,.05); --shadow-md:0 10px 26px rgba(23,38,45,.09); --shadow:0 24px 58px rgba(23,38,45,.13); --shadow-lg:0 30px 70px rgba(23,38,45,.16); --shadow-coral:0 14px 30px rgba(176,58,32,.20); /* ── Motion ────────────────────────────────────────────── */ --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1); --dur-fast:.2s; --dur:.32s; --dur-slow:.72s; /* ── Interaction ───────────────────────────────────────── */ --tap:44px; /* WCAG 2.2 minimum target — never go below */ --focus:3px solid var(--coral-ink); /* Same ring, but legible on the dark marquee band. */ --focus-on-dark:3px solid var(--coral); --focus-offset:3px; /* Direction-aware arrow glyph used by .btn and .link-arrow. A mask, not a character, so it flips cleanly with scaleX in RTL. */ --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } /* Arabic never carries tracking, and never the Latin display leading. See the two notes above. */ [dir="rtl"]{ --track-display:0; --track-tight:0; --track-wide:0; --lh-display:1.28; --lh-h1:1.28; --lh-h2:1.3; --lh-h3:1.4; --lh-hero:1.26; --lh-tight:1.3; --lh-snug:1.45; /* Same reason, for the editorial scale. */ --lh-read:1.9; --lh-lede:1.62; --lh-sub:1.45; }