:root {
--bg: #060b10;
--bg2: #0c1520;
+ --bg2-rgb: 12, 21, 32;
--surface: #101e2d;
--surface-rgb: 16, 30, 45;
--border: #182840;
html.theme-light {
--bg: #ffffff;
--bg2: #f8f9fa;
+ --bg2-rgb: 248, 249, 250;
--surface: #f0f3f7;
--surface-rgb: 240, 243, 247;
--border: #d9dfe8;
html:not(.theme-dark) {
--bg: #ffffff;
--bg2: #f8f9fa;
+ --bg2-rgb: 248, 249, 250;
--surface: #f0f3f7;
--surface-rgb: 240, 243, 247;
--border: #d9dfe8;
/* Frosted glass bar (header/footer) */
.frosted-bar {
- background-color: rgba(12, 21, 32, 0.92);
+ background-color: rgba(var(--bg2-rgb), 0.92);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
box-shadow: 0 0 20px var(--accent-glow);
}
- html.theme-light .frosted-bar {
- background-color: rgba(248, 249, 250, 0.92);
- }
-
/* Article type badge styles */
.type-tech {
color: var(--type-tech);