/** * Design tokens. * * Values marked LOCKED come from the project documentation and must not be * changed without an explicit instruction. Everything else is an implementation * detail of this theme. */ :root { /* --------------------------------------------------------------- * Brand palette * * --color-primary and --color-secondary are taken from the official * MenaWorkforce logo and supersede the values in the original locked * requirements (#0B5CAD / #2FA56A) by explicit instruction. * * --color-primary-hover is derived from the brand blue (roughly 18% * darker); only the two base brand colours were supplied. * --------------------------------------------------------------- */ --color-primary: #0054a6; --color-primary-hover: #004588; /* * Brand green. At 2.74:1 on white it fails both the 4.5:1 text bar and the * 3:1 non-text bar, so it is DECORATIVE ONLY — logo, accents, low-opacity * glows and large graphic shapes. It must never carry text, an icon that * conveys meaning, or a control border. */ --color-secondary: #2cb34a; /* * Accessible green for anything that must be legible. Used for success * states in place of --color-secondary. */ --color-success: #1f8a52; --color-text: #1f2937; --color-text-light: #6b7280; --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-border: #e5e7eb; --color-danger: #dc2626; /* --------------------------------------------------------------- * Semantic aliases * * These introduce no new hues — they map locked colours to roles so * accessibility rules are applied consistently. * * Contrast against --color-bg (#fff), measured: * --color-text 13.6:1 ✓ AA / AAA * --color-primary 7.5:1 ✓ AA / AAA * --color-danger 4.8:1 ✓ AA * --color-text-light 4.8:1 ✓ AA * --color-success 4.4:1 ✓ AA large text & UI (3:1) · ✗ normal text (4.5:1) * --color-secondary 2.7:1 ✗ fails everything — decorative only * --color-border 1.2:1 ✗ decorative only * * --color-success clears the 3:1 bar for large text, icons and UI * boundaries, but sits just under 4.5:1 for normal body text — keep it off * small text on a light background. * --color-border is decorative; interactive control borders use * --color-border-strong to satisfy WCAG 2.2 §1.4.11 (3:1 non-text contrast). * --------------------------------------------------------------- */ --color-on-primary: var(--color-bg); --color-border-strong: var(--color-text-light); --color-focus: var(--color-primary); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); /* --------------------------------------------------------------- * Typography * * Manrope for Latin scripts, Cairo for Arabic — LOCKED. * Font files are not yet self-hosted; the fallback stacks below keep the * theme fully functional until they are. * --------------------------------------------------------------- */ --font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-arabic: "Cairo", system-ui, "Segoe UI", Tahoma, Arial, sans-serif; --font-base: var(--font-latin); /* Manrope ships 400–800, Cairo 300–700 — LOCKED */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Mobile-first type scale. responsive.css scales the display sizes up. */ --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; --text-4xl: 2rem; --text-5xl: 2.25rem; --leading-tight: 1.2; --leading-snug: 1.35; --leading-base: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; /* --------------------------------------------------------------- * Layout — LOCKED * --------------------------------------------------------------- */ --container-max: 1280px; --content-max: 760px; --grid-gap: 32px; /* Mobile value; responsive.css steps this to 72px then 96px. */ --section-spacing: 56px; --container-padding: 20px; /* --------------------------------------------------------------- * Spacing scale (4px base) * --------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* --------------------------------------------------------------- * Border radius — LOCKED * --------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; --border-width: 1px; /* --------------------------------------------------------------- * Shadows — LOCKED * --------------------------------------------------------------- */ --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08); /* --------------------------------------------------------------- * Motion — LOCKED: 200–300ms, fade/lift only * --------------------------------------------------------------- */ --duration-fast: 200ms; --duration-base: 250ms; --duration-slow: 300ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); --card-lift: 4px; /* --------------------------------------------------------------- * Interaction sizing * * --target-min satisfies WCAG 2.2 §2.5.8 Target Size (Minimum, AA). * --target-comfortable is the touch-friendly default for buttons/inputs. * --------------------------------------------------------------- */ --target-min: 24px; --target-comfortable: 44px; --focus-width: 2px; --focus-offset: 2px; --icon-size: 24px; /* --------------------------------------------------------------- * Header * * Metrics live here rather than inside the component because * responsive.css retunes them per breakpoint, and because the navigation * has to fit eight locked top-level items from 1024px upward. Changing * --nav-font-size or --nav-gap changes the whole space budget, so treat * them as one system. * --------------------------------------------------------------- */ --header-height: 64px; /* * Glass surface. 0.85 is deliberate, not arbitrary: white at 0.85 over a * worst-case black backdrop composites to #D9D9D9, which keeps body text * at 9.6:1. Lower opacity looks glassier but can drop text below AA when * dark content scrolls beneath. */ --header-bg: rgba(255, 255, 255, 0.85); --header-bg-opaque: var(--color-bg); --header-blur: 14px; --header-saturate: 160%; --header-border: rgba(15, 23, 42, 0.07); --header-shadow-scrolled: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --logo-max-height: 34px; --logo-max-width: 132px; --nav-font-size: var(--text-sm); --nav-gap: var(--space-1); --nav-link-padding-inline: var(--space-3); --nav-link-padding-block: var(--space-2); --nav-chevron-size: 14px; /* Restrained brand glow — used only on CTA hover, active nav and focus. */ --glow-primary: 0 0 0 4px rgba(0, 84, 166, 0.14); --glow-secondary: 0 0 0 4px rgba(44, 179, 74, 0.16); --dropdown-bg: var(--color-bg); --dropdown-radius: var(--radius-md); --dropdown-shadow: var(--shadow-md); --dropdown-offset: var(--space-2); --drawer-width: min(400px, 88vw); /* --------------------------------------------------------------- * Z-index scale * --------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-skip-link: 500; } /** * Arabic switches the base font to Cairo automatically — LOCKED behaviour. * Targets both the document direction and the language so a single RTL block * inside an LTR page is covered too. * * Redefining the token is not sufficient on its own: font-family is declared on * body, so descendants inherit the already-computed value. typography.css * re-applies font-family here so the switch actually takes effect. */ [dir="rtl"], :lang(ar) { --font-base: var(--font-arabic); }