/* ========================================================================== HAZ MED — Design tokens The single source of truth. Nothing below this file may hard-code a colour, a size, a duration or an easing. If a value is needed and not here, add it here first. Palette rule: cyan + charcoal + white ONLY. No second hue. Hazard-signal colours (amber/red/green) exist solely for safety iconography and form validation state — never as brand chrome. RTL rule: every spacing/position token below is consumed through LOGICAL properties (margin-inline-start, inset-inline-end, border-inline-start...). Physical left/right is a bug in this codebase. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND RAW The three values taken directly from the logo. Never used directly in components — always consumed via the semantic tokens in section 5. ---------------------------------------------------------------------- */ --haz-cyan: #09ABC5; --haz-charcoal: #484949; --haz-white: #FFFFFF; /* ---------------------------------------------------------------------- 2. CYAN SCALE Derived from #09ABC5 (HSL 188.3°, 91% sat, 40% light). Hue held constant at 188°; lightness and saturation eased across the ramp. 500 is pinned to the exact brand value. Ratio noted is against #FFFFFF. ---------------------------------------------------------------------- */ --cyan-50: #F1FAFC; /* 1.06 — tint wash, band background */ --cyan-100: #DBF4F8; /* 1.15 — tint wash, hover on light surfaces */ --cyan-200: #B5EAF2; /* 1.31 — rails, dividers, inactive step nodes */ --cyan-300: #78DDED; /* 1.57 — ACCENT TEXT ON DARK (9.79 on --ink) */ --cyan-400: #31C9E2; /* 1.77 — hover fill for primary button */ --cyan-500: #09ABC5; /* 2.75 — BRAND. Fills, icons, display type only. NOT a text colour on white. */ --cyan-600: #0C8FA4; /* 3.83 — focus ring, control borders, LARGE text */ --cyan-700: #0F7383; /* 5.53 — CYAN TEXT ON WHITE. AA at body size. */ --cyan-800: #0F5864; /* 8.08 — link hover / active text */ --cyan-900: #0D3F48; /* 11.53 — deep accent */ --cyan-950: #0A2B31; /* 14.97 — deepest accent */ /* ---------------------------------------------------------------------- 3. NEUTRAL SCALE Not pure grey. Built on the charcoal's own hue (180°) at 4.5% saturation so the greys sit under the cyan rather than fighting it. 700 is pinned to the exact brand charcoal #484949. ---------------------------------------------------------------------- */ --neutral-0: #FFFFFF; /* 1.00 */ --neutral-50: #F8F9F9; /* 1.05 — alternating band ground */ --neutral-100: #F1F3F3; /* 1.11 — inset panels, table zebra */ --neutral-200: #E4E7E7; /* 1.24 — hairline dividers (decorative only) */ --neutral-300: #D2D6D6; /* 1.45 — card borders (decorative only) */ --neutral-400: #AAB2B2; /* 2.16 — disabled text on dark, placeholders */ --neutral-500: #7F8A8A; /* 3.51 — FORM CONTROL BORDERS (clears 1.4.11) */ --neutral-600: #616B6B; /* 5.49 — MUTED BODY TEXT. AA on white. */ --neutral-700: #484949; /* 9.03 — BRAND CHARCOAL. Default body text. */ --neutral-800: #343838; /* 11.87 — headings */ --neutral-900: #232727; /* 15.10 — display headings */ --neutral-950: #181A1A; /* 17.48 */ /* ---------------------------------------------------------------------- 4. INK The dark ground for full-bleed bands and hero overlays. Charcoal pushed dark and pulled toward the cyan hue so dark sections read as the same brand, not as generic black. Still one hue family. ---------------------------------------------------------------------- */ --ink: #0E2830; /* white on ink = 15.39 */ --ink-2: #153A45; /* raised surface on ink; white on ink-2 = 12.19 */ --ink-line: #23505C; /* hairline on ink */ /* ---------------------------------------------------------------------- 5. SEMANTIC COLOUR Components consume THESE, never sections 2–4 directly. Every text pair below is verified — see DESIGN-SYSTEM.md § Contrast ledger. ---------------------------------------------------------------------- */ /* Surfaces */ --surface: var(--neutral-0); --surface-alt: var(--neutral-50); --surface-sunken: var(--neutral-100); --surface-tint: var(--cyan-50); --surface-inverse: var(--ink); --surface-inverse-2: var(--ink-2); /* Text on light */ --text: var(--neutral-700); /* 9.03 */ --text-strong: var(--neutral-900); /* 15.10 */ --text-muted: var(--neutral-600); /* 5.49 */ --text-accent: var(--cyan-700); /* 5.53 */ --text-accent-hover: var(--cyan-800); /* 8.08 */ --text-display-accent: var(--cyan-600); /* 3.83 — ≥24px / ≥18.66px bold ONLY */ /* Text on ink */ --text-inverse: var(--neutral-0); /* 15.39 on ink */ --text-inverse-muted: var(--neutral-300); /* 10.50 on ink */ --text-inverse-accent: var(--cyan-300); /* 9.79 on ink */ /* Lines. border-decorative may be low contrast; border-control may not. */ --border-decorative: var(--neutral-200); --border-card: var(--neutral-300); --border-control: var(--neutral-500); /* 3.51 — WCAG 1.4.11 */ --border-strong: var(--neutral-700); --border-accent: var(--cyan-500); --border-inverse: var(--ink-line); /* Interactive */ --action-fill: var(--cyan-500); --action-fill-hover: var(--cyan-400); --action-fill-active: var(--cyan-600); --action-on-fill: var(--ink); /* 5.60 on cyan-500. NOT white. */ --action-edge: var(--cyan-600); /* 3.83 boundary vs white */ --focus-ring: var(--cyan-600); /* 3.83 vs white */ --focus-ring-inverse: var(--cyan-300); /* 9.79 vs ink */ /* ---------------------------------------------------------------------- 6. HAZARD SIGNAL RESTRICTED USE. Permitted only inside safety iconography, product hazard callouts, and form validation state. Never on nav, buttons, headings, or any brand chrome. Using these as decoration is a brand defect. ---------------------------------------------------------------------- */ --signal-danger: #B3261E; /* 6.54 on white */ --signal-danger-bg: #FDF2F1; --signal-caution: #8A5A00; /* 5.72 on white — amber darkened for text */ --signal-caution-bg: #FFF8E8; --signal-caution-mark:#F0A202; /* icon fill only, never text */ --signal-ok: #1F6B45; /* 5.28 on white */ --signal-ok-bg: #F0F7F3; /* ---------------------------------------------------------------------- 7. TYPEFACES Two faces from one superfamily so Arabic and Latin share a skeleton. System stack listed first-to-last so unstyled text is never Times. ---------------------------------------------------------------------- */ --font-latin: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Active family. base.css re-points this on html[lang="ar"]. */ --font-body: var(--font-latin); --font-head: var(--font-latin); /* Weights. Latin is a variable font (400–600), so 500 is free. Arabic ships 400 and 600 only — --fw-medium collapses to 600 under [lang="ar"] rather than faux-bolding. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---------------------------------------------------------------------- 8. TYPE SCALE 1.200 minor third on mobile widening to 1.250 at the display sizes. --type-scale is 1 for Latin and 1.0625 for Arabic: Arabic at an identical px size reads optically smaller, so the whole scale steps up 6.25% under [lang="ar"] without touching layout spacing. ---------------------------------------------------------------------- */ --type-scale: 1; --fs-3xs: calc(0.6875rem * var(--type-scale)); /* 11 — legal, table units */ --fs-2xs: calc(0.75rem * var(--type-scale)); /* 12 — eyebrow, tag */ --fs-xs: calc(0.8125rem * var(--type-scale)); /* 13 — caption, meta */ --fs-sm: calc(0.875rem * var(--type-scale)); /* 14 — dense UI, table */ --fs-base: calc(1rem * var(--type-scale)); /* 16 — body minimum */ --fs-md: calc(1.0625rem * var(--type-scale)); /* 17 — long-form body */ --fs-lg: calc(1.25rem * var(--type-scale)); /* 20 — lead paragraph */ --fs-xl: calc(1.5rem * var(--type-scale)); /* 24 — h3 */ --fs-2xl: calc(clamp(1.625rem, 1.35rem + 1.2vw, 1.875rem) * var(--type-scale)); --fs-3xl: calc(clamp(1.875rem, 1.45rem + 1.9vw, 2.375rem) * var(--type-scale)); --fs-4xl: calc(clamp(2.25rem, 1.60rem + 2.9vw, 3.125rem) * var(--type-scale)); --fs-5xl: calc(clamp(2.625rem, 1.70rem + 4.1vw, 4rem) * var(--type-scale)); /* Line height. Arabic needs materially more leading — diacritics sit above and descenders below the baseline band. base.css raises these on html[lang="ar"]. */ --lh-display: 1.08; --lh-heading: 1.20; --lh-snug: 1.35; --lh-body: 1.60; --lh-relaxed: 1.75; /* Tracking. NEVER applied to Arabic — the script is cursive and joined, and letter-spacing visibly breaks the joins. Every rule using these tokens is scoped :not(:lang(ar)) in base.css. */ --track-display: -0.022em; --track-heading: -0.014em; --track-body: 0; --track-caps: 0.09em; --measure: 68ch; /* prose max line length */ --measure-narrow: 54ch; /* ---------------------------------------------------------------------- 9. SPACING — 4px base ---------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Vertical rhythm for full-width bands — fluid, so mobile is not cavernous */ --band-y: clamp(3rem, 1.6rem + 6vw, 6rem); --band-y-tight: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); --band-y-tall: clamp(4rem, 2rem + 9vw, 8rem); /* ---------------------------------------------------------------------- 10. LAYOUT ---------------------------------------------------------------------- */ --container: 1200px; --container-wide: 1400px; --container-prose: 46rem; --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --grid-gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); --header-h: 4.5rem; /* 72px — desktop sticky header */ --header-h-compact: 3.75rem; /* 60px — mobile */ /* ---------------------------------------------------------------------- 11. RADII Restrained. The logo's rounded diamond is the only generous curve in the system; UI stays close to square so it reads as instrument, not consumer app. ---------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; /* buttons, inputs */ --radius-lg: 8px; /* cards, panels */ --radius-xl: 12px; /* media frames, large panels */ --radius-pill: 999px; /* ---------------------------------------------------------------------- 12. ELEVATION Cool-tinted, low alpha. There is no "floating card" language here — elevation signals interactivity or overlay, nothing else. ---------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(14, 40, 48, 0.06); --shadow-sm: 0 1px 3px rgba(14, 40, 48, 0.08), 0 1px 2px rgba(14, 40, 48, 0.04); --shadow-md: 0 4px 12px rgba(14, 40, 48, 0.08), 0 1px 3px rgba(14, 40, 48, 0.05); --shadow-lg: 0 12px 32px rgba(14, 40, 48, 0.10), 0 2px 8px rgba(14, 40, 48, 0.05); --shadow-menu: 0 18px 44px rgba(14, 40, 48, 0.14), 0 2px 6px rgba(14, 40, 48, 0.06); /* ---------------------------------------------------------------------- 13. Z-INDEX ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-megamenu: 250; --z-overlay: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600; --z-skiplink: 700; /* ---------------------------------------------------------------------- 14. MOTION — tier 3 of 10: subtle Transform and opacity only. Never width/height/top/left. ---------------------------------------------------------------------- */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-reveal: 380ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* enter */ --ease-out-firm: cubic-bezier(0.16, 1, 0.3, 1); /* enter, more settle */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state change */ --reveal-y: 12px; --stagger: 60ms; /* ---------------------------------------------------------------------- 15. DIRECTION --flip is the escape hatch for the handful of things logical properties cannot mirror: transforms, background-position, chevron glyphs. Multiply any X translation or scale by var(--flip). ---------------------------------------------------------------------- */ --flip: 1; /* ---------------------------------------------------------------------- 16. FOCUS ---------------------------------------------------------------------- */ --focus-width: 3px; --focus-offset: 2px; /* ---------------------------------------------------------------------- 17. BREAKPOINTS (documentation only) Custom properties cannot be used inside @media. These record the canonical values; the same numbers are written literally in media queries throughout base.css and components.css. Do not invent others. sm 480px large phone md 768px tablet / nav collapse boundary lg 1024px small laptop — mega-menu becomes available xl 1280px desktop 2xl 1440px large desktop ---------------------------------------------------------------------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; } /* ========================================================================== RTL — the only direction-dependent token overrides needed. Everything else mirrors for free because components use logical properties. ========================================================================== */ [dir="rtl"] { --flip: -1; } /* ========================================================================== ARABIC — optical compensation. Not a translation of the Latin settings: a different set of settings for a different script. ========================================================================== */ html[lang="ar"] { --font-body: var(--font-arabic); --font-head: var(--font-arabic); /* Arabic reads optically smaller at an identical px size */ --type-scale: 1.0625; /* Taller leading for diacritics and descenders */ --lh-display: 1.30; --lh-heading: 1.45; --lh-snug: 1.60; --lh-body: 1.90; --lh-relaxed: 2.05; /* Cursive script — tracking must be zero everywhere */ --track-display: 0; --track-heading: 0; --track-body: 0; --track-caps: 0; /* Arabic ships 400 and 600 only. 500 would be faux-bolded by the browser, which renders as a smeared outline. Collapse it. */ --fw-medium: 600; /* Arabic words are shorter in characters but the script is wider per character; a 68ch measure is too long. */ --measure: 58ch; --measure-narrow: 46ch; }