/* ===== BrainMocker website — shared theme ===== * Defines tokens for light + dark, plus the theme picker UI. * `data-theme="dark"` on activates dark mode; "light" forces light. * theme.js writes the attribute based on user choice or system pref. */ :root { --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --font-serif: ui-serif, Georgia, "Times New Roman", serif; --accent-h: 158; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --transition: 0.18s ease; } /* ===== Light (default) ===== */ :root, :root[data-theme="light"] { --accent-c: 0.07; --accent: oklch(0.46 var(--accent-c) var(--accent-h)); --accent-hover: oklch(0.42 var(--accent-c) var(--accent-h)); --accent-soft: oklch(0.5 var(--accent-c) var(--accent-h) / 0.12); --accent-ring: oklch(0.5 var(--accent-c) var(--accent-h) / 0.35); --accent-fg: #fff; --bg: oklch(0.985 0.002 270); --bg-grid: oklch(0.93 0.005 270); --bg-soft: oklch(0.97 0.003 270); --surface: #ffffff; --surface-2: oklch(0.975 0.003 270); --surface-3: oklch(0.955 0.005 270); --section-dark-bg: oklch(0.97 0.004 270); --border: oklch(0.9 0.006 270); --border-strong: oklch(0.84 0.008 270); --text: oklch(0.22 0.01 270); --text-2: oklch(0.42 0.008 270); --text-3: oklch(0.58 0.006 270); --text-muted: oklch(0.7 0.006 270); --nav-bg: oklch(0.985 0.002 270 / 0.78); --footer-bg: oklch(0.96 0.004 270); --code-text: oklch(0.22 0.01 270); --code-keyword: oklch(0.5 0.18 285); --code-string: oklch(0.46 0.14 var(--accent-h)); --em-grad-from: oklch(0.46 0.09 var(--accent-h)); --em-grad-to: oklch(0.34 0.07 var(--accent-h)); --shadow-2: 0 4px 12px -4px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.04); --shadow-pop: 0 24px 48px -12px oklch(0 0 0 / 0.18), 0 8px 16px -8px oklch(0 0 0 / 0.1); } /* ===== Dark ===== */ :root[data-theme="dark"] { --accent-c: 0.09; --accent: oklch(0.68 var(--accent-c) var(--accent-h)); --accent-hover: oklch(0.74 calc(var(--accent-c) + 0.01) var(--accent-h)); --accent-soft: oklch(0.62 var(--accent-c) var(--accent-h) / 0.18); --accent-ring: oklch(0.62 var(--accent-c) var(--accent-h) / 0.35); --accent-fg: oklch(0.12 0.01 270); --bg: oklch(0.135 0.008 270); --bg-grid: oklch(0.22 0.012 270); --bg-soft: oklch(0.15 0.008 270); --surface: oklch(0.18 0.01 270); --surface-2: oklch(0.17 0.01 270); --surface-3: oklch(0.215 0.012 270); --section-dark-bg: oklch(0.11 0.005 270); --border: oklch(0.26 0.012 270); --border-strong: oklch(0.32 0.014 270); --text: oklch(0.96 0.005 270); --text-2: oklch(0.74 0.008 270); --text-3: oklch(0.6 0.008 270); --text-muted: oklch(0.5 0.008 270); --nav-bg: oklch(0.135 0.008 270 / 0.7); --footer-bg: oklch(0.105 0.005 270); --code-text: oklch(0.96 0.005 270); --code-keyword: oklch(0.78 0.14 280); --code-string: oklch(0.78 0.1 var(--accent-h)); --em-grad-from: oklch(0.92 0.05 var(--accent-h)); --em-grad-to: oklch(0.62 0.09 var(--accent-h)); --shadow-2: 0 4px 12px -4px oklch(0 0 0 / 0.4), 0 2px 4px -2px oklch(0 0 0 / 0.2); --shadow-pop: 0 24px 48px -12px oklch(0 0 0 / 0.6), 0 8px 16px -8px oklch(0 0 0 / 0.4); } /* ===== Theme picker UI ===== * Compact 3-state segmented control. Sits inside .nav-links. */ .theme-picker { display: inline-flex; align-items: center; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; gap: 1px; } .theme-picker button { width: 26px; height: 26px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--text-3); cursor: pointer; padding: 0; transition: color var(--transition), background var(--transition); } .theme-picker button:hover { color: var(--text); } .theme-picker button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 0 oklch(0 0 0 / 0.04); } :root[data-theme="dark"] .theme-picker button[aria-pressed="true"] { background: var(--surface-3); } .theme-picker svg { width: 14px; height: 14px; }