/* ============================================================================ FoundryAI — GCC Design-Token System (FAI-P08-03) ---------------------------------------------------------------------------- Evidence-based rebuild per ADR 0002, gated by the FAI-P08-02 survey (docs/research/GCC_UX_EVIDENCE.md). Three layers, themable without touching component CSS: 0. Primitives — theme-invariant ramps. The only *measured* GCC token source is the Oman GUP design system (@govom/tokens 0.3.0, MIT); its navy/indigo brand ramp, neutral ramp, status anchors, warm canvas, purple 6px focus ring, spacing/radius/icon scales are adopted verbatim (ADR 0002 §2–§3). Text-role anchors that miss WCAG AA 4.5:1 on our canvas carry an inline "AA adjustment" note and a darker same-hue shade. 1. Semantic — `--fai-color-*` names swapped per [data-fai-theme] on : light (default) · dark · high-contrast · oasis (orange + olive, from the user reference screenshot — ADR 0002 amendment). Every theme must pass WCAG AA for all text pairs (TokensContrastTests guards this in CI). 2. Component — derived values only where one component needs them (nav translucency, floor-plan editor canvas ink). The v0.1 token names (--fai-canvas, --fai-ink, --fai-primary, …) are kept as aliases of the semantic layer so every existing component re-skins with zero diff; new code consumes the --fai-color-* names. Theme resolution: index.html sets data-fai-theme before first paint from the persisted preference (localStorage "fai-theme", written by foundry.setTheme), resolving "system" through prefers-color-scheme. There is deliberately NO @media (prefers-color-scheme) block here — one source of truth for resolution, no specificity traps. A11y mode classes (prefs-large-text / prefs-colorblind / prefs-battery, FAI-P05-14) override the semantic layer on the layout subtree and compose with all three themes. RTL overrides live in this file only (ADR 0002 §6). ========================================================================== */ /* ============================================================================ Layer 0 — Primitives (theme-invariant) ========================================================================== */ :root { /* -- Brand ramp — GUP navy/indigo, the survey's finance/gov/telco dominant ---- */ --fai-brand-0: #ffffff; --fai-brand-200: #dde9ff; --fai-brand-300: #bfd8ff; --fai-brand-600: #4d78ff; /* decorative accent only — 3.86:1 on light canvas */ --fai-brand-700: #2f57cd; /* AA text/fill anchor — 6.0:1 with white */ --fai-brand-800: #243d89; --fai-brand-900: #132459; /* -- Neutral ramp (GUP) ------------------------------------------------------- */ --fai-neutral-0: #fcfcfc; --fai-neutral-100: #eceef4; /* overcanvas */ --fai-neutral-200: #dfe2ec; --fai-neutral-300: #d0d0d4; --fai-neutral-600: #52525b; /* GUP content-2 */ --fai-neutral-700: #3f3f46; --fai-neutral-800: #27272a; /* GUP content-1 */ --fai-neutral-900: #202024; /* -- Deep family (GUP footer/deep #1c2133 extended for the dark theme) ------- */ --fai-deep-800: #171b2b; --fai-deep-700: #1c2133; --fai-deep-600: #232941; --fai-deep-500: #2b3252; --fai-deep-400: #3a4166; --fai-deep-300: #525a86; /* -- Warm canvas — deliberate regional signature (ADR 0002 §2) --------------- */ --fai-canvas-warm: #fefcf9; /* -- Hairline gradient stops (GUP) --------------------------------------------- */ --fai-hairline-from: #eff5ff; --fai-hairline-to: #f7f5f1; /* -- Status ramps — 700 anchors exactly as GUP publishes (ADR 0002 §2); 800 = AA adjustment for small-text pairs; 100/300 = soft fill / dark-text. */ --fai-positive-700: #157f3c; --fai-positive-300: #a5dcb8; --fai-positive-100: #e7f5ec; --fai-negative-700: #ba1c1c; --fai-negative-300: #f2b8b8; --fai-negative-100: #fdecec; --fai-warning-700: #ca8511; /* fill/icon anchor — white text on it is 3.05:1 */ --fai-warning-800: #8a5a0b; /* AA adjustment — small text on light surfaces */ --fai-warning-300: #f3d9a8; --fai-warning-100: #fdf3e2; /* -- AI accent (burnished amber — marks AI-generated content, v0.1 identity) -- */ --fai-ai-700: #b45309; --fai-ai-300: #f0c46a; --fai-ai-100: #fef3c7; /* -- Focus — GUP's exact purple, 6px stroke (ADR 0002 §2) ---------------------- */ --fai-focus: #9747ff; /* -- Spacing (px) — GUP scale verbatim (ADR 0002 §3) ---------------------------- */ --fai-space-0: 0px; --fai-space-1: 4px; --fai-space-2: 8px; --fai-space-3: 12px; --fai-space-4: 16px; --fai-space-5: 20px; --fai-space-6: 24px; --fai-space-7: 32px; --fai-space-8: 40px; --fai-space-9: 56px; /* beyond GUP — v0.1 section rhythm */ /* Named spacing semantics (GUP): phone-first screens bias to 8/12/16. */ --fai-space-between-sections: 48px; --fai-space-content-to-cta: 32px; --fai-space-between-content: 24px; --fai-space-between-form-fields: 20px; --fai-space-between-text: 16px; --fai-space-between-items: 8px; --fai-space-padding-xs: 8px; --fai-space-padding-sm: 16px; --fai-space-padding-md: 24px; --fai-space-padding-lg: 32px; --fai-space-padding-xl: 40px; /* -- Radius (GUP values, ADR 0002 §3): pill buttons are the regional convention. */ --fai-radius-sm: 4px; /* small: chips' inner elements, tight badges */ --fai-radius-md: 8px; /* component: inputs, menus, popovers */ --fai-radius-lg: 12px; /* cards */ --fai-radius-xl: 16px; /* modals / sheets */ --fai-radius-button: 999px; /* buttons — pill (stc/KFH/Doha Bank CTAs) */ --fai-radius-pill: 999px; /* -- Icon sizes (GUP): 16 / 20 / 24 / 28 / 32 ----------------------------------- */ --fai-icon-xs: 16px; --fai-icon-sm: 20px; --fai-icon-md: 24px; --fai-icon-lg: 28px; --fai-icon-xl: 32px; /* -- Typography — Arabic-first single family (ADR 0002 §4). IBM Plex Sans Arabic covers Arabic + Latin runs from one face (vendored 400/500/700 in /fonts — see fonts.css); Readex Pro is the documented alternative if weight coverage ever demands a swap. ----- */ --fai-font-display: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --fai-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --fai-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; /* Type scale (1.25 ratio): 12 / 13 / 15 / 18 / 22 / 28 / 36 on a 4px grid */ --fai-text-xs: 0.75rem; /* 12px — captions, meta */ --fai-text-sm: 0.8125rem; /* 13px — admin compact, dense UI */ --fai-text-body: 0.9375rem;/* 15px — body */ --fai-text-lg: 1.125rem; /* 18px — card titles */ --fai-text-xl: 1.375rem; /* 22px — section titles */ --fai-text-2xl: 1.75rem; /* 28px — page titles */ --fai-text-3xl: 2.25rem; /* 36px — display */ /* Leading per script (W3C alreq via ADR 0002 §4): Arabic runs need ≥1.65 body leading and taller headings; [dir="rtl"] remaps these below. */ --fai-leading-tight: 1.2; --fai-leading-normal: 1.5; /* -- Motion ----------------------------------------------------------------------- */ --fai-motion-fast: 120ms; --fai-motion-base: 200ms; --fai-motion-slow: 280ms; --fai-ease: cubic-bezier(.2, 0, 0, 1); /* -- Z-index scale (10–90) --------------------------------------------------------- */ --fai-z-sticky: 20; --fai-z-dock: 40; --fai-z-modal: 60; --fai-z-toast: 80; --fai-z-palette: 90; /* -- Sizing -------------------------------------------------------------------------- */ --fai-target-min: 44px; /* minimum hit target, one-handed mobile (a11y) */ --fai-sidebar-w: 264px; --fai-sidebar-w-collapsed: 72px; --fai-topbar-h: 56px; /* -- Density (comfortable default; compact = admin tables via .fai-compact) ---------- */ --fai-density-row: 44px; --fai-density-text: var(--fai-text-body); /* -- Direction factor (ADR 0002 §6): +1 LTR / −1 RTL for the rare geometric transform; logical properties cover everything else. ---------------------------- */ --fai-dir-factor: 1; } /* ============================================================================ Layer 1 — Semantic tokens · LIGHT (default) ---------------------------------------------------------------------------- Warm canvas, white surfaces, GUP content inks, brand-700 primary with white text (6.0:1). Every text pair below is asserted ≥4.5:1 (≥3:1 for large-only exceptions) by TokensContrastTests. ========================================================================== */ :root { color-scheme: light; /* Surfaces */ --fai-color-canvas: var(--fai-canvas-warm); --fai-color-surface: var(--fai-brand-0); --fai-color-surface-2: var(--fai-neutral-100); --fai-color-surface-3: var(--fai-neutral-200); --fai-color-overcanvas: var(--fai-neutral-100); /* Content — GUP content-1/2 verbatim; muted is the AA adjustment of GUP content-3 #7a7a83 (4.19:1 on the warm canvas → #6b6b74, 5.2:1). */ --fai-color-content-1: var(--fai-neutral-800); --fai-color-content-2: var(--fai-neutral-600); --fai-color-content-muted: #6b6b74; --fai-color-content-disabled: #7a7a83; /* Borders */ --fai-color-border: var(--fai-neutral-300); --fai-color-border-strong: #8d8d95; --fai-border-width: 1px; /* Brand / interactive */ --fai-color-primary: var(--fai-brand-700); --fai-color-primary-strong: var(--fai-brand-800); --fai-color-primary-soft: var(--fai-brand-200); --fai-color-on-primary: var(--fai-brand-0); --fai-color-link: var(--fai-brand-700); --fai-color-accent: var(--fai-brand-600); /* Focus (ADR 0002 §2 — GUP's exact purple, 6px stroke) */ --fai-color-focus: var(--fai-focus); --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .28); /* Status */ --fai-color-success: var(--fai-positive-700); --fai-color-success-soft: var(--fai-positive-100); --fai-color-warning: var(--fai-warning-800); --fai-color-warning-strong: var(--fai-warning-700); --fai-color-warning-soft: var(--fai-warning-100); --fai-color-danger: var(--fai-negative-700); --fai-color-danger-strong: #9a1c13; /* hover fill for danger controls */ --fai-color-danger-soft: var(--fai-negative-100); --fai-color-info: var(--fai-brand-700); --fai-color-info-soft: var(--fai-brand-200); /* Soft tint of the decorative accent (selection hovers, tool buttons) */ --fai-color-accent-soft: var(--fai-brand-200); /* AI accent (marks AI-generated content — never color alone) */ --fai-color-ai: var(--fai-ai-700); --fai-color-ai-soft: var(--fai-ai-100); /* Score scale (5 steps, colorblind-leaning, always paired with a numeric label) + soft fills for chips. */ --fai-score-1: #ba1c1c; --fai-score-1-soft: #fdecec; --fai-score-2: #a04a0f; --fai-score-2-soft: #fdefe3; --fai-score-3: #8a5a0b; --fai-score-3-soft: #fdf3e2; --fai-score-4: #0f6b47; --fai-score-4-soft: #e6f4ec; --fai-score-5: #2f57cd; --fai-score-5-soft: #dde9ff; /* Elevation — GUP soft shadows (ADR 0002 §2) */ --fai-shadow-xs: 0 1px 2px rgb(28 33 51 / .04); --fai-shadow-sm: 0 2px 8px rgb(28 33 51 / .06); --fai-shadow-md: 0 8px 24px rgb(28 33 51 / .08); /* ---- v0.1 semantic-name aliases (consumed across all Fai* components) ------ */ --fai-canvas: var(--fai-color-canvas); --fai-surface: var(--fai-color-surface); --fai-surface-2: var(--fai-color-surface-2); --fai-surface-3: var(--fai-color-surface-3); --fai-border: var(--fai-color-border); --fai-border-strong: var(--fai-color-border-strong); --fai-ink: var(--fai-color-content-1); --fai-ink-2: var(--fai-color-content-2); --fai-ink-3: var(--fai-color-content-muted); --fai-primary: var(--fai-color-primary); --fai-primary-strong: var(--fai-color-primary-strong); --fai-primary-soft: var(--fai-color-primary-soft); --fai-on-primary: var(--fai-color-on-primary); /* SH (2026-09-17) — role split so a theme may use a LIGHT primary fill. Each falls back to the classic token, so themes that don't define the -ink/-line/-fill-strong colors are unchanged. */ --fai-primary-ink: var(--fai-color-primary-ink, var(--fai-color-primary)); --fai-primary-line: var(--fai-color-primary-line, var(--fai-color-primary)); --fai-primary-fill-strong: var(--fai-color-primary-fill-strong, var(--fai-color-primary-strong)); --fai-link: var(--fai-color-link); --fai-accent: var(--fai-color-accent); --fai-success: var(--fai-color-success); --fai-success-soft: var(--fai-color-success-soft); --fai-warning: var(--fai-color-warning); --fai-warning-soft: var(--fai-color-warning-soft); --fai-danger: var(--fai-color-danger); --fai-danger-strong: var(--fai-color-danger-strong); --fai-danger-soft: var(--fai-color-danger-soft); /* FAI-P08-03 — white-text danger FILL role (emergency button): falls back to the classic tokens, so themes whose danger already carries white text (light, oasis) are unchanged; dark themes define the -fill colors because their ink-tuned danger flips light. */ --fai-danger-fill: var(--fai-color-danger-fill, var(--fai-color-danger)); --fai-danger-fill-strong: var(--fai-color-danger-fill-strong, var(--fai-color-danger-strong)); --fai-info: var(--fai-color-info); --fai-info-soft: var(--fai-color-info-soft); --fai-accent-soft: var(--fai-color-accent-soft); --fai-ai: var(--fai-color-ai); --fai-ai-soft: var(--fai-color-ai-soft); } /* ============================================================================ Layer 1 — Semantic tokens · DARK ---------------------------------------------------------------------------- Deep #1c2133 surface family with brand-300 accents (ADR 0002 §5). Primary buttons invert: brand-300 fill + brand-900 ink (10.2:1). ========================================================================== */ [data-fai-theme="dark"] { color-scheme: dark; --fai-color-canvas: var(--fai-deep-800); --fai-color-surface: var(--fai-deep-700); --fai-color-surface-2: var(--fai-deep-600); --fai-color-surface-3: var(--fai-deep-500); --fai-color-overcanvas: var(--fai-deep-800); --fai-color-content-1: var(--fai-neutral-0); --fai-color-content-2: var(--fai-neutral-300); --fai-color-content-muted: #a3a3ae; /* 6.4:1 on surface */ --fai-color-content-disabled: #6b6f85; --fai-color-border: var(--fai-deep-400); --fai-color-border-strong: var(--fai-deep-300); --fai-border-width: 1px; --fai-color-primary: var(--fai-brand-300); --fai-color-primary-strong: var(--fai-brand-200); --fai-color-primary-soft: #2c3763; --fai-color-on-primary: var(--fai-brand-900); --fai-color-link: var(--fai-brand-300); --fai-color-accent: var(--fai-brand-600); --fai-color-focus: var(--fai-focus); --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .38); --fai-color-success: var(--fai-positive-300); --fai-color-success-soft: #173427; --fai-color-warning: var(--fai-warning-300); --fai-color-warning-strong: var(--fai-warning-700); --fai-color-warning-soft: #3a2c14; --fai-color-danger: var(--fai-negative-300); --fai-color-danger-strong: #ffd9d9; /* hover fill for danger controls */ --fai-color-danger-soft: #3d1d1d; /* FAI-P08-03 — white-text danger FILL: the ink-tuned danger above flips light on dark surfaces, so fixed-white copy (the universally red-and-white rescue button) uses this theme-invariant dark red instead — white on negative-700 keeps AA in every theme. */ --fai-color-danger-fill: var(--fai-negative-700); --fai-color-danger-fill-strong: #9a1c13; --fai-color-info: var(--fai-brand-300); --fai-color-info-soft: #232f57; --fai-color-accent-soft: #2c3763; --fai-color-ai: var(--fai-ai-300); --fai-color-ai-soft: #33270d; --fai-score-1: #f2b8b8; --fai-score-1-soft: #3d1d1d; --fai-score-2: #f0bd8c; --fai-score-2-soft: #3b2c17; --fai-score-3: #f3d9a8; --fai-score-3-soft: #3a2c14; --fai-score-4: #a5dcb8; --fai-score-4-soft: #173427; --fai-score-5: #bfd8ff; --fai-score-5-soft: #232f57; --fai-shadow-xs: 0 1px 2px rgb(0 0 0 / .40); --fai-shadow-sm: 0 2px 8px rgb(0 0 0 / .50); --fai-shadow-md: 0 8px 24px rgb(0 0 0 / .60); } /* ============================================================================ Layer 1 — Semantic tokens · HIGH CONTRAST ---------------------------------------------------------------------------- WCAG AAA-pair content colors on near-black, white 2px borders, gold links, flat elevation (ADR 0002 §5). The purple focus ring is retained per the ADR. ========================================================================== */ [data-fai-theme="high-contrast"] { color-scheme: dark; --fai-color-canvas: #000000; --fai-color-surface: #0a0a0a; --fai-color-surface-2: #141414; --fai-color-surface-3: #1f1f1f; --fai-color-overcanvas: #000000; --fai-color-content-1: #ffffff; --fai-color-content-2: #ffffff; --fai-color-content-muted: #e6e6e6; --fai-color-content-disabled: #9e9e9e; --fai-color-border: #ffffff; --fai-color-border-strong: #ffffff; --fai-border-width: 2px; --fai-color-primary: #ffffff; --fai-color-primary-strong: #e6e6e6; --fai-color-primary-soft: #262626; --fai-color-on-primary: #000000; --fai-color-link: #ffd700; --fai-color-accent: #ffd700; --fai-color-focus: var(--fai-focus); --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .55); --fai-color-success: #7fd88f; --fai-color-success-soft: #10241a; --fai-color-warning: #ffd166; --fai-color-warning-strong: #ffd166; --fai-color-warning-soft: #2b2110; --fai-color-danger: #ff8a8a; --fai-color-danger-strong: #ffc2c2; /* hover fill for danger controls */ --fai-color-danger-soft: #2b1010; /* FAI-P08-03 — white-text danger FILL (same rationale as the dark theme). */ --fai-color-danger-fill: var(--fai-negative-700); --fai-color-danger-fill-strong: #9a1c13; --fai-color-info: #9ec5ff; --fai-color-info-soft: #102040; --fai-color-accent-soft: #262626; --fai-color-ai: #ffd166; --fai-color-ai-soft: #2b2110; --fai-score-1: #ff8a8a; --fai-score-1-soft: #2b1010; --fai-score-2: #ffb066; --fai-score-2-soft: #2b1a0e; --fai-score-3: #ffd166; --fai-score-3-soft: #2b2110; --fai-score-4: #7fd88f; --fai-score-4-soft: #10241a; --fai-score-5: #9ec5ff; --fai-score-5-soft: #102040; --fai-shadow-xs: none; --fai-shadow-sm: none; --fai-shadow-md: none; } /* ============================================================================ Layer 1 — Semantic tokens · OASIS (4th selectable theme) — "Orange and Olive" ---------------------------------------------------------------------------- SH redesign (2026-09-17): replaces the mint/jade palette. One rule — apricot orange is CONTENT (hero box, next-step box, AI marker, decorative icons), olive is ACTION (buttons, links, active nav). White canvas, white cards with hairline borders, warm charcoal text; nothing saturated or dark. --fai-primary is rendered both as a fill (white text on it) and as text on white across the components, so it is the lightest olive that holds 4.5:1 both ways (#6E7230 = 5.11:1). Spec: docs/design/THEME_ORANGE_OLIVE.md. The theme key stays "oasis" so saved preferences carry over. ========================================================================== */ [data-fai-theme="oasis"] { color-scheme: light; /* SH (2026-09-19) — back to white: Sana tried darker beige, decided against it. Plain white canvas/surface, with just enough tint on the two "layer" surfaces (surface-2/3) to tell cards apart from the page behind them. */ --fai-color-canvas: #ffffff; --fai-color-surface: #ffffff; --fai-color-surface-2: #f9f9f6; --fai-color-surface-3: #f2f2ec; --fai-color-overcanvas: #ffffff; /* SH (2026-09-19) — "the text black": reverted off the warm-brown reading text back to a plain near-black (true #000 reads harsher/heavier than most UI type wants — #1a1a1a is the conventional "black" for body copy, still reads as black at UI sizes). */ --fai-color-content-1: #1a1a1a; /* 17.4:1 on canvas — headings */ --fai-color-content-2: #333333; /* 12.6:1 on canvas — body text */ --fai-color-content-muted: #6b6b6b; /* 5.7:1 on canvas — hints/meta */ --fai-color-content-disabled: #b3b3b3; --fai-color-border: #ece6e0; --fai-color-border-strong: #a9a08f; --fai-border-width: 1px; /* SH (2026-09-19) — Sana: "no green buttons left over" — green moved OFF every interactive control and onto a light, pastel wash only (selected/hover backgrounds — her reference swatch). BROWN now carries every actionable role instead (buttons, icons, links, borders), matching the reading-text brown so the whole theme reads as one coherent earthy neutral, with light green and bright yellow as the two soft accent washes sitting on top of it. */ --fai-color-primary: #6b4226; /* button fill — brown, white label 8.63:1 */ --fai-color-on-primary: #ffffff; --fai-color-primary-fill-strong: #5c3a21; /* button hover — deeper brown */ --fai-color-primary-ink: #6b4226; /* brown — text/icon on white */ --fai-color-primary-line: #a67b5b; /* brown as border */ --fai-color-primary-strong: #4a2f1a; /* deep brown — links, text on primary-soft */ --fai-color-primary-soft: #a8d8a8; /* Sana's newer light green swatch — selected/hover washes ONLY, never a button */ --fai-color-link: #4a2f1a; --fai-color-accent: #eae894; /* Sana's pale yellow swatch — decorative fills only, never text */ /* SH (2026-09-19) — Orange & Olive's own highlight, not GUP's stock purple (ADR 0002 §2): matches the theme's own accent yellow, so focus/selection reads as "this theme," not a leftover from a different palette. Other themes keep the ADR's purple untouched. */ --fai-color-focus: #a67c00; --fai-focus-ring: 0 0 0 6px rgb(255 224 102 / .5); /* Earthy forest green — success/positive states only now (readiness bar, checkmarks), not the general "brand" color anymore. */ --fai-color-success: #38593a; --fai-color-success-soft: #e6efe2; --fai-color-warning: #8a5a0b; --fai-color-warning-strong: #ca8511; --fai-color-warning-soft: #f7efdd; --fai-color-danger: #ba1c1c; --fai-color-danger-strong: #9a1c13; --fai-color-danger-soft: #fbecec; --fai-color-info: #1e5fa8; --fai-color-info-soft: #e3edf8; --fai-color-accent-soft: #fff6d9; /* pale yellow hero fill */ /* SH (2026-09-19) — Sana caught this: still the old burnt-orange/cream pair, unrelated to "green and bright yellow." AI-marker badges now use the same bright-yellow fill as the theme's accent, with brown text (matches the rest of the app's reading text) — never orange, never plain beige. */ --fai-color-ai: #6b4226; /* brown text, 7.75:1 on ai-soft */ --fai-color-ai-soft: #fef3c7; /* bright yellow — AI-made fill */ --fai-score-1: #ba1c1c; --fai-score-1-soft: #fbecec; --fai-score-2: #ba4a12; /* red-orange — 4.59:1 on its soft */ --fai-score-2-soft: #fcf0e4; --fai-score-3: #b4560f; /* orange — 4.6:1 on its soft */ --fai-score-3-soft: #fffbf2; --fai-score-4: #0f6b47; --fai-score-4-soft: #e3f2e8; --fai-score-5: #1f4d26; --fai-score-5-soft: #e8f5e9; /* Ring strokes only (graphics, not text): true oranges instead of the AA-darkened text shades. */ --fai-score-2-ring: #f2a05a; --fai-score-3-ring: #f4bb5e; --fai-shadow-xs: 0 1px 2px rgb(74 42 20 / .05); --fai-shadow-sm: 0 2px 8px rgb(74 42 20 / .07); --fai-shadow-md: 0 8px 24px rgb(74 42 20 / .09); } /* ============================================================================ Layer 2 — Component tokens (derived values a single component needs) ========================================================================== */ :root { /* Translucent top navigation (ADR 0002 §2 — GUP rgba(255 255 255 / 48%)) */ --fai-nav-scrim: rgb(255 255 255 / 48%); /* Neutral hover wash for icon-sized controls (chip remove ×, ghost icon buttons) */ --fai-color-hover-scrim: rgb(39 42 58 / .08); /* Modal/dialog backdrop — deliberately theme-invariant (a scrim reads dark in every theme; HC keeps it so surfaces stay distinct from the void behind). */ --fai-scrim-backdrop: rgb(9 12 20 / .70); /* Card Majlis panel (FAI-P05-12, legacy page): warm UAE-theme paper. */ --fai-majlis-gradient: linear-gradient(180deg, #fdf8ef 0%, #f6ecd9 100%); } [data-fai-theme="dark"] { --fai-nav-scrim: rgb(23 27 43 / 72%); --fai-color-hover-scrim: rgb(255 255 255 / .10); --fai-majlis-gradient: linear-gradient(180deg, #241f14 0%, #2b2415 100%); } [data-fai-theme="high-contrast"] { --fai-nav-scrim: rgb(0 0 0 / 88%); --fai-color-hover-scrim: rgb(255 255 255 / .20); --fai-majlis-gradient: none; } [data-fai-theme="oasis"] { --fai-nav-scrim: rgb(255 255 255 / 60%); --fai-color-hover-scrim: rgb(110 114 48 / .08); --fai-majlis-gradient: linear-gradient(180deg, #fffdf8 0%, #fef7e8 100%); } /* ============================================================================ Density — compact flavor for admin tables (32px rows, 13px text) ========================================================================== */ .fai-compact { --fai-density-row: 32px; --fai-density-text: var(--fai-text-sm); } /* ============================================================================ Accessibility modes (FAI-P05-14 continuity) — semantic-token overrides, not new CSS. The layout root applies prefs-large-text / prefs-colorblind / prefs-battery (PreferenceState.ModeClasses); the same system restyles everything in every theme. Numeric labels stay mandatory, so no information is color-only. ========================================================================== */ /* Large text: scale the type ramp without touching layout metrics. */ .prefs-large-text { --fai-text-xs: 0.875rem; --fai-text-sm: 0.9375rem; --fai-text-body: 1.075rem; --fai-text-lg: 1.25rem; --fai-text-xl: 1.5rem; --fai-text-2xl: 1.9rem; --fai-text-3xl: 2.4rem; } /* Colorblind-safe (Okabe-Ito leaning): remap the semantic hues per theme. Light-tuned values on light themes, dark-tuned on dark. */ .prefs-colorblind { --fai-color-primary: #0072B2; --fai-color-primary-strong: #005a8e; --fai-color-primary-soft: #e1f0f9; --fai-color-link: #0072B2; --fai-color-accent: #56B4E9; --fai-color-success: #0072B2; --fai-color-success-soft: #e1f0f9; --fai-color-danger: #882255; --fai-color-danger-soft: #f7e6f0; --fai-color-warning: #92610c; --fai-color-warning-strong: #E69F00; --fai-color-warning-soft: #fdf3dd; --fai-color-info: #0072B2; --fai-color-info-soft: #e1f0f9; --fai-score-1: #882255; --fai-score-1-soft: #f7e6f0; --fai-score-2: #E69F00; --fai-score-2-soft: #fdf3dd; --fai-score-3: #C9A227; --fai-score-3-soft: #faf2d8; --fai-score-4: #56B4E9; --fai-score-4-soft: #eaf6fc; --fai-score-5: #0072B2; --fai-score-5-soft: #e1f0f9; } [data-fai-theme="dark"] .prefs-colorblind, [data-fai-theme="high-contrast"] .prefs-colorblind { --fai-color-primary: #56B4E9; --fai-color-primary-strong: #9bd4f4; --fai-color-primary-soft: #12324a; --fai-color-on-primary: #06263a; --fai-color-link: #56B4E9; --fai-color-accent: #56B4E9; --fai-color-success: #56B4E9; --fai-color-success-soft: #12324a; --fai-color-danger: #d67ba8; --fai-color-danger-soft: #3d1a2b; /* FAI-P08-03 — white-text danger FILL: the colorblind dark danger is light pink, so the white-text fill uses the dark Okabe-Ito variant with a proportionally darker hover. */ --fai-color-danger-fill: #882255; --fai-color-danger-fill-strong: #6d1b43; --fai-color-warning: #E69F00; --fai-color-warning-strong: #E69F00; --fai-color-warning-soft: #3d2c0e; --fai-color-info: #56B4E9; --fai-color-info-soft: #12324a; --fai-score-1: #d67ba8; --fai-score-1-soft: #3d1a2b; --fai-score-2: #E69F00; --fai-score-2-soft: #3d2c0e; --fai-score-3: #e3c95e; --fai-score-3-soft: #3a3012; --fai-score-4: #56B4E9; --fai-score-4-soft: #12324a; --fai-score-5: #9bd4f4; --fai-score-5-soft: #12324a; } /* Battery saver: suppress elevation, long transitions and saturated fills. */ .prefs-battery { --fai-shadow-xs: none; --fai-shadow-sm: none; --fai-shadow-md: none; --fai-motion-fast: 0ms; --fai-motion-base: 0ms; --fai-motion-slow: 0ms; } /* Battery saver + skeleton: keep a static surface instead of animating pulses. */ .prefs-battery .fai-skeleton { animation: none; } /* ============================================================================ RTL & mixed-script rules (ADR 0002 §4/§6) — the ONLY place direction overrides live. Logical properties everywhere mean components never mirror; these hooks adjust tokens and typography behavior per script. ========================================================================== */ /* Arabic runs: taller leading (W3C alreq — Arabic needs ≥1.65 body leading and headings that clear ascenders/diacritics) and never letter-spaced. */ [dir="rtl"] { --fai-leading-normal: 1.66; --fai-leading-tight: 1.4; --fai-dir-factor: -1; } :where([dir="rtl"], [dir="rtl"] *) { letter-spacing: normal; } /* Numerals stay ASCII/Western (survey: Ooredoo/KFH/gov.om run ASCII digits; ADR 0002 §4) — no Arabic-Indic forcing anywhere. Tabular alignment for scores/tables is applied in base.css. */