/* ============================================ Terraform3D — Theme Variables Dark is the default; [data-theme="light"] overrides. Applied to by theme.js before first paint. ============================================ */ :root { /* Brand */ --blue: #2969b5; --blue-light: #3d7fd4; --blue-dark: #1a4f8f; /* Page backgrounds */ --bg: #060610; --bg2: #0d0d1a; --bg3: #111120; /* Surface (cards, inputs, modals) */ --surface: #0e0e18; --surface-2: #16161e; --input-bg: #16161e; /* Text */ --heading: #ffffff; --text: #e8e8f0; --sub: #8b8ba0; --text-muted: #9ca3af; --text-subtle: #6b7280; --text-faint: #7a7a95; /* Borders */ --border: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.1); --border-input: #2a2a3a; --divider: rgba(255,255,255,0.08); /* Transparent fills */ --card: rgba(255,255,255,0.03); --card-hover: rgba(255,255,255,0.07); --btn-ghost: rgba(255,255,255,0.06); --btn-ghost-hover: rgba(255,255,255,0.1); /* Navigation */ --header-bg: rgba(6,6,16,0.88); --nav-mobile-bg: #0d0d1a; --nav-mobile-border: rgba(255,255,255,0.1); } [data-theme="light"] { /* Page backgrounds */ --bg: #f4f6fb; --bg2: #eef1f8; --bg3: #e8ecf4; /* Surface */ --surface: #ffffff; --surface-2: #f0f4fb; --input-bg: #f0f4fb; /* Text */ --heading: #0d0d1a; --text: #1a1a2e; --sub: #546080; --text-muted: #64748b; --text-subtle: #64748b; --text-faint: #94a3b8; /* Borders */ --border: rgba(0,0,0,0.09); --border-mid: rgba(0,0,0,0.12); --border-input: #cdd5e3; --divider: rgba(0,0,0,0.08); /* Transparent fills */ --card: rgba(41,105,181,0.04); --card-hover: rgba(41,105,181,0.08); --btn-ghost: rgba(0,0,0,0.05); --btn-ghost-hover: rgba(0,0,0,0.09); /* Navigation */ --header-bg: rgba(244,246,251,0.92); --nav-mobile-bg: #eef1f8; --nav-mobile-border: rgba(0,0,0,0.1); } /* ============================================ Theme toggle button — shared across all pages ============================================ */ .theme-toggle { font-size: 15px; width: 36px; height: 36px; border-radius: 8px; background: none; border: 1px solid transparent; color: var(--sub); cursor: pointer; transition: background .18s, color .18s, border-color .18s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .theme-toggle:hover { background: var(--btn-ghost-hover); border-color: var(--border); color: var(--text); }