/* ============================================================ DARK MODE Remaps the semantic theme tokens under [data-theme="dark"]. Raw --bf-* palette values are never overridden here — only the semantic layer, so every component follows automatically. Activated by theme.js via . ============================================================ */ [data-theme="dark"] { --color-primary: #3D97E8; /* lightened brand blue for contrast */ --color-primary-strong: #5AA8ED; --color-primary-hover: #6FB4F0; --color-accent: var(--bf-cyan-light); --color-accent-2: #A76BF7; --color-bg: var(--bf-navy-900); --color-bg-subtle: #06213B; --color-surface: var(--bf-navy); --color-surface-2: #093457; --color-surface-tint: rgba(255,255,255,0.05); --color-text: #E8EEF4; --color-text-strong: #FFFFFF; --color-text-muted: #94A6B8; --color-text-inverse: var(--bf-navy-900); --color-border: rgba(255,255,255,0.12); --color-border-strong: rgba(255,255,255,0.24); --color-divider: rgba(255,255,255,0.18); --color-icon-well: rgba(255,255,255,0.08); --header-bg: rgba(0,27,51,0.85); --header-border: rgba(255,255,255,0.10); --header-text: #E8EEF4; --footer-bg: var(--bf-navy); --footer-text: #E8EEF4; --footer-heading: #5AA8ED; --footer-bar-bg: var(--bf-navy-900); --footer-bar-text: rgba(232,238,244,0.75); --footer-bar-hover: var(--bf-white); /* Status backgrounds need to sit on dark surfaces */ --bf-success-bg: rgba(30,158,98,0.15); --bf-warning-bg: rgba(232,160,32,0.15); --bf-error-bg: rgba(214,69,69,0.15); --bf-info-bg: rgba(0,93,172,0.20); color-scheme: dark; } /* Elevate surfaces slightly in dark mode so cards read against bg */ [data-theme="dark"] .bf-card, [data-theme="dark"] .bf-download-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.06); } /* Header download icon reads white against the dark header */ [data-theme="dark"] .bf-header__label .bi { color: #fff; }