/* ── THEME: CSS CUSTOM PROPERTIES ── */ /* Dark = default. Light = [data-theme="light"] on */ :root { --bg: #111111; --bg-card: #1a1a1a; --bg-card-alt: #161616; --bg-hover: #1e1e1e; --bg-deep: #0d0d0d; --border: rgba(255, 255, 255, 0.07); --border-accent: rgba(80, 216, 144, 0.25); --accent: #50d890; --accent-muted: rgba(80, 216, 144, 0.15); --text: #e0e0e0; --text-bright: #ffffff; --text-muted: #888888; --text-dim: rgba(255, 255, 255, 0.35); --text-faint: rgba(255, 255, 255, 0.25); --text-xfaint: rgba(255, 255, 255, 0.2); --scrollbar-track: #1e1f22; --nav-bg: #111111; } [data-theme="light"] { --bg: #f7f7f7; --bg-card: #ececec; --bg-card-alt: #f0f0f0; --bg-hover: #e4e4e4; --bg-deep: #e8e8e8; --border: rgba(0, 0, 0, 0.09); --border-accent: rgba(20, 120, 60, 0.3); --accent: #1a7a42; --accent-muted: rgba(20, 120, 60, 0.1); --text: #1a1a1a; --text-bright: #000000; --text-muted: #3d3d3d; --text-dim: rgba(0, 0, 0, 0.60); --text-faint: rgba(0, 0, 0, 0.50); --text-xfaint: rgba(0, 0, 0, 0.42); --scrollbar-track: #d8d8d8; --nav-bg: #f7f7f7; } /* ── THEME TOGGLE BUTTON ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 3px; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* sun icon hidden in dark, shown in light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── BODY TRANSITION ── */ body { transition: background-color 0.25s ease, color 0.25s ease; } /* ── SITE FOOTER ── */ .site-footer { text-align: center; padding: 24px 0 40px; color: var(--text-xfaint); font-size: 11px; border-top: 1px solid var(--border); margin-top: 0; letter-spacing: 0.5px; } [data-theme="light"] .site-footer { border-top-color: rgba(0,0,0,0.08); }