/** * Fai Public shell — dark mode overrides. * * Companion to fai-public.css. All rules scoped to [data-bs-theme="dark"] * so this file is a no-op in light mode. Loaded LAST in after * fai-public.css so the token overrides win without !important. * * Pattern mirrors standalone-dark-mode.css for the Fai standalone chat: * - Section 1: design-token overrides (covers ~all surfaces via var() resolution). * - Section 2: per-class fixes for selectors that bypass tokens (raw rgba alerts). * * Brand identity is preserved: the brand stays purple + orange; --btn-primary * (orange) keeps its value, and --brand-primary shifts to a lighter purple in * dark mode so brand-coloured text (wordmark, hero h1, ghost buttons, alerts) * stays readable on the dark surface. Mirrors the same shift in * standalone-dark-mode.css. */ /* ============================================================ 1. Design-token overrides ============================================================ */ [data-bs-theme="dark"] { /* Brand — lighten so brand-coloured text reads against the dark surface */ --brand-primary: #A593E8; --brand-primary-hover: #BFAEF5; --brand-primary-subtle: rgba(165, 147, 232, 0.18); --brand-light: #2A1F3D; /* Surfaces */ --color-bg: #15131A; --color-surface: #1F1B26; --color-border: #3D3245; /* Text */ --fg-1: #E8E4F0; /* body */ --fg-2: #B8A8E0; /* brand-tinted body */ --fg-3: #8B7FA6; /* muted */ /* Effects */ --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(165, 147, 232, 0.3); } /* ============================================================ 2. Per-class fixes ============================================================ */ /* Alerts — light-mode rgba alphas (0.06) are nearly invisible on dark. Bump alpha so the tinted background reads against the card surface. */ [data-bs-theme="dark"] .fai-public .alert--danger { background: rgba(220, 38, 38, 0.18); } [data-bs-theme="dark"] .fai-public .alert--warning { background: rgba(217, 119, 6, 0.18); } /* Validation summary uses the same low-alpha red as the danger alert. */ [data-bs-theme="dark"] .fai-public .validation-summary-errors { background: rgba(220, 38, 38, 0.18); } /* Env tag — orange-on-orange CTA stays readable; ensure inverse text is white. */ [data-bs-theme="dark"] .fai-public .env-tag { color: var(--color-text-inverse); } /* Brand wordmark — keep the brand purple visible on dark. The base rule uses var(--brand-primary) which we intentionally do not flip, so this is implicit; no per-class rule needed. */ /* Hero visual (purple gradient) - already dark by design; no override needed. */ /* Checkbox checked state - uses --brand-primary which stays purple; tick is white via --color-text-inverse. No override needed. */