/* ══════════════════════════════════════════════════════════════════ Wasla Design Tokens — cross-locale layer (layer c) v2 brand palette + elevation + motion + icon palette. Authoritative brand spec: Docs/design/brand_identity_v2.md (C17). ══════════════════════════════════════════════════════════════════ */ :root { /* ── v2 brand palette (Cycle 17 — mirrors wasla-{ltr,rtl}.css) ── Defined here too so cross-locale modules that load tokens.css resolve the v2 values; tokens.css loads AFTER wasla-{ltr,rtl}.css so these must match exactly to avoid stale shadowing. */ --wasla-navy: #1D3A5E; --wasla-navy-deep: #152C49; --wasla-navy-700: #2C4F78; --wasla-blue: #0557E7; --wasla-blue-hover: #0246C4; --wasla-gold: #D4AF36; --wasla-gold-soft: #F2E6BE; /* Foreground for text/icons on FIXED brand surfaces (gradient icon chips, the always-navy marketing band, the electric-blue button). Intentionally theme-INVARIANT: those surfaces never flip with the theme, so white is correct in BOTH light and dark — so it is NOT overridden in the dark scope. */ --wasla-on-brand: #FFFFFF; --wasla-success: #1F9D6B; --wasla-success-soft: #E4F5EE; --wasla-ai-tint: #E5ECFC; --wasla-ai-tint-strong: #D5E1FB; --wasla-warning: #E0922A; --wasla-danger: #DA3B3B; --wasla-ink: #1D3A5E; --wasla-body: #56606F; --wasla-muted: #666F7D; /* AYP-05: darkened from #8A93A1 (3.1:1) to clear WCAG AA 4.5:1 on white (5.08) + canvas (4.69) */ --wasla-line: #E4E7EC; --wasla-surface: #FFFFFF; --wasla-canvas: #F4F6F9; --wasla-canvas-navy: #1D3A5E; /* Cycle 26 Lane B: metric-icon chip palette tokens (light) — was inline hex in app.css; now flip-able via the dark block below. */ --wasla-chip-blue-bg: #eff6ff; --wasla-chip-blue-fg: #2563eb; --wasla-chip-amber-bg: #fffbeb; --wasla-chip-amber-fg: #d97706; --wasla-chip-purple-bg: #faf5ff; --wasla-chip-purple-fg: #7c3aed; /* Cycle 24 Lane A: define semantic aliases consumed by component CSS. */ --text-muted: var(--wasla-muted); /* #666F7D in light (AYP-05) */ --text-body: var(--wasla-body); /* #56606F in light */ --border-color: var(--wasla-line); /* #E4E7EC in light */ --wasla-navy-tint: #C8D2E2; /* light navy-tint sub-text */ /* Heading/label TEXT token (Cycle 20 Lane F). Headings + emphasis labels read navy in light mode — same value as --wasla-navy here, but a SEMANTICALLY separate token so it can flip to off-white in dark mode WITHOUT dragging the navy chrome surfaces with it. Retires the reactive PR #135 per-component dark overrides. */ --wasla-heading: #1D3A5E; /* glass-morphism demoted in C17 — see brand_identity_v2.md; do not use as headline style. Kept defined so existing consumers (toasts / transient overlays) do not break; the prototype is flat + solid. */ /* Glass surfaces (light). Tuned (feat/landing-design-pass) so frosted panels READ on a light page: a faintly cool off-white tint (not pure white) at a slightly higher alpha for legibility, plus a visible hairline border that mixes a soft navy edge with a top white highlight so the panel reads as elevated frosted glass. Benefits toasts too (more defined edge). Opaque @supports fallback below. */ --surface-glass-bg: rgba(247, 250, 254, 0.62); /* QA DEF-3 (2026-06-19): firm up the light-glass edge + backdrop so panels read as frosted/elevated rather than flat white (border 0.18->0.26, saturate 1.9->2.0). Text contrast on the surface is unchanged. */ --surface-glass-border: rgba(29, 58, 94, 0.26); --surface-glass-blur: 20px; --surface-glass-saturate: 2.0; /* Glass surfaces (dark — applied via [data-bs-theme="dark"]). C19 Lane C: navy-tinted to match the v2 dark palette. */ --surface-glass-bg-dark: rgba(22, 34, 60, 0.66); --surface-glass-border-dark: rgba(255, 255, 255, 0.10); /* Elevation scale (geometric: each step ~2x prior y-offset) */ --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-elev-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-elev-3: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-elev-4: 0 8px 24px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.10); /* Motion */ --motion-hover: 150ms ease-out; --motion-press: 80ms ease-in; --motion-card: 200ms cubic-bezier(0.2, 0, 0.1, 1); /* Brand-tinted hover ring (used on card hover border) */ /* C17: re-toned to the v2 electric blue #0557E7 (rgb 5,87,231). */ --ring-brand-soft: rgba(5, 87, 231, 0.18); --ring-brand-strong: rgba(5, 87, 231, 0.32); /* Cycle 5 (A8): unified border-radius scale. Pre-fix templates mixed 6/8/10/12px ad-hoc; standardise on 3 steps. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Design-uplift P1: the Cycle 5 (B) per-icon rainbow palette (26 --icon-* hues) is RETIRED. Sidebar icons are monochrome; the active row reads blue + a gold dot (see app.css sidebar rules). */ } /* ══════════════════════════════════════════════════════════════════ Cycle 19 Lane C — v2 DARK MODE token ramp Authoritative dark home: this file loads AFTER wasla-{ltr,rtl}.css, so re-pointing the brand tokens here flips the whole cascade. The wasla-{ltr,rtl}.css token block stays light-only by design. The dark palette is the navy v2 identity deepened toward near-black — same navy DNA, not a generic grey dark theme. Electric blue is lifted for vibrancy/contrast on dark surfaces; gold is softened; tints become deep-navy fills with lighter text. Dark mode is token-flip driven: components that consume the --wasla-* / --brand-* / --bs-* tokens flip automatically. Per-component dark overrides (app.css / cycle15-platform.css) exist only where a component hard-codes a light value. Dark palette (see Docs/design/brand_identity_v2.md §11): page #0E1726 raised surface #16223C card #1B2A47 hover surface #22335A line #2B3A57 line-strong #3A4D70 navy chrome #101B2E navy-deep #0A1322 blue (action) #3C7BF0 blue-hover #5B91F3 gold #E0C25C gold-soft fill #3A3115 success #3DBE8B success-soft #11331F ai-tint #16294D ai-tint-strong #244073 text primary #E8ECF3 body #AEB9CC muted #7C879B ══════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { /* ── v2 dark brand core — navy deepened toward near-black ── */ --wasla-navy: #101B2E; /* dark chrome anchor: nav, sidebar, footer */ --wasla-navy-deep: #0A1322; /* deepest navy: gradients, deep shadow */ --wasla-navy-700: #243657; /* mid navy: secondary fills */ --wasla-blue: #3C7BF0; /* electric blue lifted for dark-bg contrast */ --wasla-blue-hover: #5B91F3; /* primary hover (lighten, not darken, on dark) */ --wasla-gold: #E0C25C; /* gold softened — reads warm on dark */ --wasla-gold-soft: #3A3115; /* gold tint → deep gold-brown fill */ /* ── v2 dark functional / state ── */ --wasla-success: #3DBE8B; /* success lifted for dark-bg contrast */ --wasla-success-soft: #11331F; /* success card fill → deep green */ --wasla-ai-tint: #16294D; /* AI suggestion / info surfaces → deep blue */ --wasla-ai-tint-strong: #244073;/* AI card borders / accent strips */ --wasla-warning: #E8A24A; /* warning lifted */ --wasla-danger: #EB5757; /* danger lifted */ /* ── v2 dark neutrals ── */ --wasla-ink: #E8ECF3; /* primary text on dark surfaces (off-white) */ --wasla-heading: #E8ECF3; /* heading/label text → off-white on dark (C20 F) */ --wasla-body: #AEB9CC; /* body copy, secondary text */ --wasla-muted: #98A3B5; /* captions, placeholders, disabled — AYP-05: lifted from #7C879B (3.95:1) to ~5.6:1 on the dark surface */ --wasla-line: #2B3A57; /* borders, dividers, low-contrast on dark */ --wasla-surface: #1B2A47; /* cards, panels, inputs */ --wasla-canvas: #0E1726; /* page background behind cards */ --wasla-canvas-navy: #101B2E; /* navy bands stay navy (slightly raised) */ /* Cycle 26 Lane B: chip palette dark counterparts (was inline in app.css L673-685). */ --wasla-chip-blue-bg: #16294D; --wasla-chip-blue-fg: #5B91F3; --wasla-chip-amber-bg: #3A3115; --wasla-chip-amber-fg: #E8C25C; --wasla-chip-purple-bg: #2A1F45; --wasla-chip-purple-fg: #B69AF0; /* Cycle 24 Lane A: dark-mode semantic aliases. */ --text-muted: var(--wasla-muted); /* #98A3B5 in dark (AYP-05) — flips via the dark wasla-muted */ --text-body: var(--wasla-body); /* #AEB9CC in dark */ --border-color: var(--wasla-line); /* #2B3A57 in dark */ --wasla-navy-tint: #5A6A85; /* deep-navy-tint counterpart */ /* ── re-point legacy brand aliases so the whole cascade flips ── */ --brand-primary: #3C7BF0; --brand-hover: #5B91F3; --brand-light: #16294D; --brand-secondary: #AEB9CC; --brand-accent: #E0C25C; /* legacy --wasla-* aliases */ --wasla-ai-accent: #3C7BF0; --wasla-success-tint: #11331F; /* Bootstrap dark surface tokens — keep BS components coherent. */ --bs-primary: #3C7BF0; --bs-primary-rgb: 60, 123, 240; --bs-body-bg: #0E1726; --bs-body-color: #E8ECF3; --bs-emphasis-color: #F4F6FA; --bs-secondary-color: #AEB9CC; --bs-tertiary-color: #7C879B; --bs-secondary-bg: #16223C; --bs-tertiary-bg: #1B2A47; --bs-border-color: #2B3A57; /* ── extra dark-mode surface ramp (consumed by per-component rules) ── */ --wasla-surface-raised: #16223C; /* raised surfaces under cards */ --wasla-surface-hover: #22335A; /* hover/active fill on dark surfaces */ --wasla-line-strong: #3A4D70; /* stronger divider where needed */ /* dark shadow — deeper, since elevation reads via darkness on dark UIs */ --wasla-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5); --surface-glass-bg: var(--surface-glass-bg-dark); --surface-glass-border: var(--surface-glass-border-dark); --ring-brand-soft: rgba(60, 123, 240, 0.28); --ring-brand-strong: rgba(60, 123, 240, 0.45); /* Design-uplift P1: dark-mode --icon-* rainbow retired with the light palette above (monochrome sidebar; active = blue + gold dot). */ } /* Reduced-motion: collapse motion tokens to 0. Hover elevation still applies but transitions are instant. */ @media (prefers-reduced-motion: reduce) { :root { --motion-hover: 0ms; --motion-press: 0ms; --motion-card: 0ms; } } /* Solid fallback for browsers without backdrop-filter. Components that use --surface-glass-bg pick this up automatically. */ @supports not (backdrop-filter: blur(1px)) { :root { --surface-glass-bg: #ffffff; /* C19 Lane C: navy-tinted opaque fallback to match v2 dark surface */ --surface-glass-bg-dark: #16223C; } } /* ══════════════════════════════════════════════════════════════════ Quiet-Glass System v3 — Design Uplift P0 (handoff 02-DESIGN-TOKENS) Additive layer at the END of the file so these declarations win the cascade where names collide with the aliases above (--text-body, --text-muted flip to the v3 ramp). Dark theme hangs off the repo's existing [data-bs-theme="dark"] attribute (the handoff sheet assumed [data-theme="dark"]; the server + localStorage toggle both set data-bs-theme, so that is the one authoritative switch). Brand core (--wasla-navy/-blue/-gold + dark ramp) is NOT redeclared: the blocks above already define the identical v2/v3 values. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Typography (Alexandria = display, Readex Pro = body; both cover Arabic + Latin, self-hosted under static/vendor/fonts/) ── */ --font-display: 'Alexandria', 'Readex Pro', system-ui, sans-serif; --font-body: 'Readex Pro', 'Alexandria', system-ui, sans-serif; /* ── Canvas & surfaces ── */ --canvas: #F3F5F9; --surface-solid: #FFFFFF; --surface-raised: #FAFBFD; --border-subtle: #E5E9F0; --border-strong: #DDE2EA; /* ── Text ramp ── */ --text-heading: #1D3A5E; --text-body: #46536A; --text-muted: #667081; --text-faint: #8A94A8; /* ── Glass (chrome only: nav, rails, drawers, overlays) ── */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.70); --glass-bg-lite: rgba(255, 255, 255, 0.55); /* KPI cards */ --glass-border: rgba(29, 58, 94, 0.10); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.65); --glass-shadow: 0 10px 26px rgba(23, 42, 72, 0.08); --glass-saturate: 1.12; --blur-sm: 12px; /* toolbars, chips */ --blur-md: 20px; /* top bar, sidebar */ --blur-lg: 28px; /* drawers, overlays */ /* ── Ambient washes (canvas blobs, <= 8% alpha) ── */ --wash-blue: rgba(5, 87, 231, 0.08); --wash-navy: rgba(29, 58, 94, 0.08); --wash-gold: rgba(212, 175, 54, 0.08); /* ── Status chips (text / bg) ── */ --chip-success-text: #14805E; --chip-success-bg: rgba(31, 157, 107, 0.12); --chip-warning-text: #9A6214; --chip-warning-bg: rgba(224, 146, 42, 0.14); --chip-info-text: #1D4FA8; --chip-info-bg: rgba(5, 87, 231, 0.10); --chip-danger-text: #B02A2A; --chip-danger-bg: rgba(218, 59, 59, 0.10); --chip-neutral-text: #56637A; --chip-neutral-bg: rgba(29, 58, 94, 0.07); /* ── Focus (2px offset ring; vars flip it per theme automatically) ── */ --focus-ring: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--wasla-blue); /* ── Radii (v3 semantic scale; the --radius-sm/md/lg steps above stay) ── */ --radius-control: 9px; --radius-card: 14px; --radius-panel: 16px; --radius-pill: 999px; /* ── Elevation (solid surfaces) ── */ --shadow-card: 0 8px 22px rgba(23, 42, 72, 0.05); --shadow-drawer: 0 20px 50px rgba(23, 42, 72, 0.12); --shadow-cta: 0 6px 16px rgba(5, 87, 231, 0.25); } [data-bs-theme="dark"] { --canvas: #0B1424; --surface-solid: #16223A; --surface-raised: #131F36; --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --text-heading: #E8ECF3; --text-body: #AEB9CC; --text-muted: #8B97AC; --text-faint: #7C879B; --glass-bg: rgba(18, 30, 52, 0.55); --glass-bg-strong: rgba(18, 30, 52, 0.65); --glass-bg-lite: rgba(18, 30, 52, 0.55); --glass-border: rgba(255, 255, 255, 0.09); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.10); --glass-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); --glass-saturate: 1.08; --wash-blue: rgba(60, 123, 240, 0.13); --wash-navy: rgba(36, 64, 115, 0.32); --wash-gold: rgba(224, 194, 92, 0.07); --chip-success-text: #6FD4A8; --chip-success-bg: rgba(61, 190, 139, 0.13); --chip-warning-text: #EFC07F; --chip-warning-bg: rgba(232, 162, 74, 0.13); --chip-info-text: #9DBCF7; --chip-info-bg: rgba(60, 123, 240, 0.14); --chip-danger-text: #F09A9A; --chip-danger-bg: rgba(218, 59, 59, 0.16); --chip-neutral-text: #AEB9CC; --chip-neutral-bg: rgba(255, 255, 255, 0.07); --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.30); --shadow-drawer: 0 24px 60px rgba(0, 0, 0, 0.45); --shadow-cta: 0 6px 18px rgba(60, 123, 240, 0.35); } /* ── Glass utility (chrome only: nav, rails, drawers, overlays). Never on tables, forms, or long scroll containers. ── */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge), var(--glass-shadow); } /* Fallback: no backdrop-filter support → solid */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface-solid); } } /* Reduced transparency preference → solid */ @media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }