/* ============================================================================ QFC Semantic Design Tokens — light + dark (mada / WCAG-AA compliant) ---------------------------------------------------------------------------- HOW TO USE 1. Load this file AFTER bootstrap/app css so :root wins. 2. Components should reference tokens, e.g.: background: var(--surface); color: var(--text); border: 1px solid var(--border); background: var(--primary); 3. Dark mode is automatic: your existing mada a11y panel already toggles . No per-component overrides needed — redefining the token VALUES below flips the whole UI. 4. Migrate hardcoded colors using QFC-Color-Migration.csv (literal -> token). Every foreground/background pair below passes WCAG AA (>=4.5:1 text, >=3:1 UI) in BOTH light and dark. Generated from the component CSS audit. ========================================================================== */ :root { /* ---- light theme (default) ---- */ --surface: #ffffff; --surface-2: #f6f4fa; --surface-3: #ece7f0; --text: #1f1a2e; --text-muted: #333333; --text-subtle: #767676; --on-primary: #ffffff; --border: #dee2e6; --border-strong: #a6a6a6; --primary: #25125a; --primary-hover: #1a0d42; --primary-accent: #25125a; --secondary: #d0d0d0; --violet: #3d126b; --purple: #603f83; --accent: #9013fe; --success: #198754; --danger: #dc3545; --warning: #ffc107; --info: #0dcaf0; } html[dir="rtl"] { /* QFC-1151: Arabic pages use Noto Kufi Arabic instead of Noto Sans */ --primary-font: "Noto Kufi Arabic", "Noto Sans", sans-serif; --bs-font-sans-serif: "Noto Kufi Arabic", "Noto Sans", sans-serif; } html.dark-mode { /* ---- dark theme (mada compliance switch) : the "opposing" colors ---- */ --surface: #121212; --surface-2: #1e1e1e; --surface-3: #2d2d2d; --text: #e6e6e6; --text-muted: #b3b3b3; --text-subtle: #9a9a9a; --on-primary: #ffffff; --border: #333333; --border-strong: #4d4d4d; --primary: #7a4fd0; --primary-hover: #8f66e0; --primary-accent: #b79cff; --secondary: #3a3a3a; --violet: #9b6bd6; --purple: #a986cf; --accent: #b06bff; --success: #75d19a; --danger: #f18b93; --warning: #ffd24d; --info: #5ad8f5; /* -------------------------------------------------------------------------- Design-system --colors-* tokens (QFC-1143 re-open). These are referenced ~150x across 30 component CSS files but were never defined anywhere, so they always resolved to their inline light-hex fallback — which is exactly why those components stayed light in dark mode. Defining them here (dark scope only) flips every consumer at once. Light mode is untouched: with these undefined in :root, components keep using their inline fallback hex = current production look. -------------------------------------------------------------------------- */ /* Surfaces — invert white/tinted fills to elevated dark surfaces */ --colors-background-base-default: var(--surface-2); --colors-background-base-secondary: var(--surface-3); --colors-background-base-tertiary: var(--surface-2); --colors-background-base-inverse: var(--surface-3); --colors-background-primary-primary-1-subtle: var(--surface-3); --colors-background-primary-primary-1-surface-soft: var(--surface-3); --colors-background-status-success-subtile: var(--surface-3); --colors-background-status-warning-subtile: var(--surface-3); --colors-brand-primary-indigo-indigo-100: var(--surface-3); /* Brand fills keep white text — use the mid brand tone, not the light text tint */ --colors-background-brand-solid: var(--primary); --colors-background-button-brand: var(--primary); --colors-background-button-default: var(--primary); --colors-background-button-custom: var(--primary); --colors-brand-primary-primary-1: var(--primary); /* Text — neutral headings/body go light; brand headings go to the light purple tint */ --colors-text-heading-display-default: var(--text); --colors-text-heading-display-secondary: var(--text); --colors-text-heading-display-primary: var(--primary-accent); --colors-text-heading-display-surface: #ffffff; --colors-text-body-default: var(--text); --colors-text-body-primary: var(--text); --colors-text-body-secondary: var(--text-muted); --colors-text-body-subtile: var(--text-subtle); --colors-text-base-default: var(--text); --colors-text-base-subtle: var(--text-subtle); --colors-text-status-error: var(--danger); --colors-text-status-success: var(--success); /* Borders */ --colors-border-card-subtle: var(--border); --colors-border-card-default: var(--border); --colors-border-card-secondary: var(--border); --colors-border-card-primary: var(--border-strong); --colors-border-secondary: var(--border); --colors-border-base-subtle: var(--border); --colors-border-button-subtile: var(--border-strong); --colors-border-status-success: var(--success); }