/* ============================================================================ SRH ALOQOD — صرح العقود للعقارات spacing.tokens.css · spacing layer ---------------------------------------------------------------------------- Independent of colour and typography. This file declares NO colour, NO font and NO layout rule — only distance. Provenance is marked on every value: [INHERITED] already approved in the design system — reproduced verbatim [DERIVED] assembled only from inherited values and a documented rule [GUARD] a technical restriction, not a style choice Source of truth: ds/tokens/spacing.css the fourteen-step scale, baseline, grid, gutters, page margins, container width ds/guidelines/spacing.card "4px base unit, used for padding, gaps and section rhythm" — and it highlights eight of the fourteen steps: 4 8 16 24 32 48 64 96 Those three named uses — padding, gaps, section rhythm — are the only evidence for semantic roles, so the semantic layer has exactly three families plus the inherited layout values. Nothing else is invented. ========================================================================= */ :root { /* ========================================================================== 1 · PRIMITIVE SCALE [INHERITED — ds/tokens/spacing.css] Fourteen steps, reproduced verbatim. Every step is a multiple of the 4px base unit. Steps 12, 20, 40, 80, 128 and 160 exist in the scale but are not highlighted in the guideline card; they are kept because inheritance is verbatim, and are not referenced by any semantic role below. ====================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* --- base unit and rhythm [INHERITED] -------------------------------- */ --baseline: 8px; /* --- inherited layout measures [INHERITED] ---------------------------- */ --container-max: 1200px; --grid-columns: 12; /* @kind other */ --grid-gutter-desktop: 24px; --grid-gutter-mobile: 16px; --margin-page-desktop: 80px; --margin-page-mobile: 24px; --margin-print: 18mm; /* the inherited alias, kept verbatim so anything already consuming it keeps resolving; --layout-gutter below is the semantic name for it */ --gutter: var(--space-6); /* ========================================================================== 2 · SEMANTIC ROLES [DERIVED] Derived strictly from the guideline card's three named uses. Every value below resolves to one of the eight highlighted steps — no role reaches a step the card does not highlight, and no role introduces a raw number. ====================================================================== */ /* --- inset · padding inside a bounded element ------------------------- */ --inset-xs: var(--space-1); /* 4px */ --inset-sm: var(--space-2); /* 8px */ --inset-md: var(--space-4); /* 16px */ --inset-lg: var(--space-6); /* 24px */ --inset-xl: var(--space-8); /* 32px */ /* --- stack · gap between elements along the block axis ---------------- */ --stack-xs: var(--space-2); /* 8px */ --stack-sm: var(--space-4); /* 16px */ --stack-md: var(--space-6); /* 24px */ --stack-lg: var(--space-8); /* 32px */ --stack-xl: var(--space-12); /* 48px */ /* --- inline · gap between elements along the inline axis -------------- Inline means "along the reading direction", which is right-to-left here. These are gaps, never sided offsets — see the RTL guard. */ --inline-xs: var(--space-1); /* 4px */ --inline-sm: var(--space-2); /* 8px */ --inline-md: var(--space-4); /* 16px */ --inline-lg: var(--space-6); /* 24px */ /* --- section · rhythm between major blocks of a page ------------------- */ --section-sm: var(--space-12); /* 48px */ --section-md: var(--space-16); /* 64px */ --section-lg: var(--space-24); /* 96px */ /* --- layout · aliases onto the inherited measures ---------------------- */ --layout-gutter: var(--grid-gutter-desktop); --layout-gutter-mobile: var(--grid-gutter-mobile); --layout-page-margin: var(--margin-page-desktop); --layout-page-margin-mobile: var(--margin-page-mobile); --layout-container-max: var(--container-max); } /* ============================================================================ GUARD RAILS ---------------------------------------------------------------------------- [GUARD] RTL — spacing must be logical, never sided. This system reads right-to-left. Consumers apply these tokens through the logical properties only: padding-inline / padding-block not padding-left / -right margin-inline-start / -end not margin-left / -right inset-inline-start / -end not left / right gap / row-gap / column-gap direction-agnostic already Every token here is a magnitude with no side baked in, so a token can never carry an LTR assumption on its own — only a consumer can, by reaching for a physical property. [GUARD] No negative values. None are defined. The references document none, and a negative space token would encode an overlap decision that belongs to layout, which is out of scope for this stage. [GUARD] Scale discipline. · The base unit is 4px. Nothing off that grid. · Semantic roles use only the eight highlighted steps: 4 8 16 24 32 48 64 96. The six unhighlighted steps remain available as primitives but carry no role until a reference justifies one. · Components must consume semantic roles, never --space-* directly. [GUARD] Scope. · No colour, no typography, no shadow, no motion, no layout rule here. · No component CSS. Per-component padding is NOT defined in this file: the references specify a scale and three uses, but do not specify any per-component measurement. Inventing them would be an aesthetic guess. · This file has no effect on the frozen SRH ALOQOD master logotype. [KNOWN] The scale is expressed in px, exactly as inherited. A px scale does not respond to a user's browser font-size. Converting to rem would change approved values and is therefore not done here — it is raised as an open question in the report, not decided silently. ========================================================================= */