/* byForja theme overrides — applied when html[data-theme="dark"] is set.
* Site default is light (cream #FAFAF8 + royal blue #1B5DE0).
* theme-toggle.js sets data-theme on based on user pref or system. */
html[data-theme="dark"] {
--bg: #0B1729 !important;
--surface: #13213D !important;
--ink: #E8EEFB !important;
--ink-soft: #9AA8C7 !important;
--ink-faint: #5A6BA0 !important;
--border: #1F2D52 !important;
--accent: #3D7BF5 !important; /* slightly brighter on dark bg */
--accent-light: rgba(27, 93, 224, 0.18) !important;
--green-light: rgba(74, 222, 128, 0.12) !important;
--red-light: rgba(248, 113, 113, 0.12) !important;
}
/* Sticky nav backdrop on dark */
html[data-theme="dark"] nav {
background: rgba(11, 23, 41, 0.85) !important;
border-bottom-color: #1F2D52 !important;
}
/* Logo color in dark */
html[data-theme="dark"] .logo { color: #E8EEFB !important; }
/* Theme toggle button (injected by theme-toggle.js) */
.theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--ink-soft);
font-family: inherit;
font-size: 13px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.theme-toggle:hover {
border-color: var(--accent, #1B5DE0);
color: var(--accent, #1B5DE0);
}
.theme-toggle svg { width: 16px; height: 16px; }