/* ═══════════════════════════════════════════════════════════════════════════ CTRL-A Theme — Light & Dark mode via CSS custom properties Include on any page: Toggle: theme.js reads/writes data-theme on ═══════════════════════════════════════════════════════════════════════════ */ /* ── Light (default) ─────────────────────────────────────────────────────── */ :root { --t-bg: #fafbfc; --t-bg-alt: #f3f4f6; --t-surface: #ffffff; --t-surface2: #f9fafb; --t-card: #ffffff; --t-card-hover: #f3f4f6; --t-border: #e5e7eb; --t-border-lt: #d1d5db; --t-text: #1f2937; --t-text2: #6b7280; --t-text3: #9ca3af; --t-accent: #6366f1; --t-accent-lt: #818cf8; --t-accent-bg: rgba(99,102,241,.08); --t-accent-border: rgba(99,102,241,.2); --t-success: #10b981; --t-warn: #f59e0b; --t-danger: #ef4444; --t-info: #3b82f6; --t-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --t-shadow-lg: 0 4px 16px rgba(0,0,0,.08); --t-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --t-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; --t-radius: 10px; --t-radius-sm: 6px; --t-radius-lg: 14px; /* Input-specific */ --t-input-bg: #ffffff; --t-input-border: #e5e7eb; /* Code blocks */ --t-code-bg: #f3f4f6; --t-code-text: #1f2937; /* Scrollbar */ --t-scrollbar: #d1d5db; --t-scrollbar-hover: #9ca3af; } /* ── Dark ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --t-bg: #0B0E14; --t-bg-alt: #0f1219; --t-surface: #141820; --t-surface2: #1A1F2B; --t-card: #181D27; --t-card-hover: #1E2433; --t-border: #252B3B; --t-border-lt: #2D3548; --t-text: #E8ECF1; --t-text2: #8892A4; --t-text3: #5A6478; --t-accent: #6366f1; --t-accent-lt: #818cf8; --t-accent-bg: rgba(99,102,241,.12); --t-accent-border: rgba(99,102,241,.25); --t-success: #10b981; --t-warn: #f59e0b; --t-danger: #ef4444; --t-info: #74b9ff; --t-shadow: 0 1px 3px rgba(0,0,0,.3); --t-shadow-lg: 0 4px 16px rgba(0,0,0,.4); --t-input-bg: #0f1219; --t-input-border: #252B3B; --t-code-bg: #0f1219; --t-code-text: #cdd6f4; --t-scrollbar: #2D3548; --t-scrollbar-hover: #3d4560; } /* ── Global resets / defaults ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--t-font); background: var(--t-bg); color: var(--t-text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .2s, color .2s; } /* Smooth transitions on theme switch */ body *, body *::before, body *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: .15s; transition-timing-function: ease; } /* Exclude animations/transforms from the theme transition */ body *[style*="animation"], body *[style*="transform"] { transition-property: none; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--t-scrollbar); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--t-scrollbar-hover); } /* ── Theme Toggle Button (injected by theme.js) ──────────────────────────── */ .theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: all .15s; } .theme-toggle:hover { background: var(--t-card-hover); color: var(--t-text); border-color: var(--t-border-lt); }