/* Dark-mode token overrides. Activated by [data-bs-theme="dark"] on . */ [data-bs-theme="dark"] { /* Brand — slightly lighter for contrast on dark surfaces */ --mf-primary: #818CF8; --mf-primary-hover: #A5B4FC; --mf-primary-subtle: #1E1B4B; --mf-primary-rgb: 129, 140, 248; /* Surfaces */ --mf-bg: #0B0F1A; --mf-surface: #111827; --mf-surface-2: #1E293B; --mf-border: #1F2937; --mf-border-strong: #334155; /* Text */ --mf-text: #F1F5F9; --mf-text-muted: #94A3B8; --mf-text-subtle: #64748B; /* Status (slightly desaturated) */ --mf-success: #34D399; --mf-success-subtle: #064E3B; --mf-danger: #F87171; --mf-danger-subtle: #7F1D1D; --mf-warning: #FBBF24; --mf-warning-subtle: #78350F; --mf-info: #60A5FA; --mf-info-subtle: #1E3A8A; /* Shadows — replaced with border outlines in dark mode */ --mf-shadow-xs: none; --mf-shadow-sm: 0 0 0 1px var(--mf-border); --mf-shadow-md: 0 0 0 1px var(--mf-border), 0 4px 6px rgba(0, 0, 0, .25); --mf-shadow-lg: 0 0 0 1px var(--mf-border), 0 10px 20px rgba(0, 0, 0, .35); /* Bootstrap bridge re-points to dark values */ --bs-body-bg: var(--mf-bg); --bs-body-color: var(--mf-text); --bs-border-color: var(--mf-border); --bs-primary: var(--mf-primary); --bs-primary-rgb: var(--mf-primary-rgb); --bs-secondary-color: var(--mf-text-muted); --bs-tertiary-color: var(--mf-text-subtle); --bs-tertiary-bg: var(--mf-surface); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--mf-border-strong); border: 2px solid var(--mf-bg); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mf-text-subtle); }