/* Axiom colour themes. Every page loads this first; theme.js sets . */ :root, [data-theme="light"] { --navy: #1b1f3b; --navy-2: #262b52; --navy-3: #343a6b; --ink: #0b0d1f; --cyan: #00d4ff; --cyan-2: #00a9d6; --cyan-soft: #e3f9ff; --cyan-ink: #00627c; --bg: #f5f6fa; --surface: #ffffff; --surface-2: #eceef5; --text: #1b1f3b; --strong: #1b1f3b; --muted: #5e6484; --line: #e2e4ee; --line-strong: #c9cde0; --track: #c9cde0; --user: #e8eaf3; --link: #1f6fd6; --grid-line: rgba(27,31,59,.05); --nav-bg: rgba(245,246,250,.78); --side-bg: #1b1f3b; --primary-bg: #1b1f3b; --primary-fg: #ffffff; --primary-hover: #262b52; --grad-start: #1b1f3b; --grad-mid: #2d59c9; --err-bg: #fff1f2; --err-line: #ffd5d9; --err-text: #b4232c; --radius: 20px; --shadow: 0 1px 2px rgba(27,31,59,.06), 0 8px 30px rgba(27,31,59,.07); --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Inter Tight", "Inter", system-ui, sans-serif; color-scheme: light; } [data-theme="dark"] { --cyan-soft: rgba(0,212,255,.12); --cyan-ink: #7fe9ff; --bg: #04050d; --surface: #0c0e1f; --surface-2: #15182c; --text: #f5f6fa; --strong: #ffffff; --muted: #9aa0c8; --line: #1a1d33; --line-strong: #2c3261; --track: #3a3f66; --user: #15182c; --link: #7cc4ff; --grid-line: rgba(255,255,255,.04); --nav-bg: rgba(4,5,13,.72); --side-bg: #0a0c1a; --primary-bg: #ffffff; --primary-fg: #04050d; --primary-hover: #e3e6f5; --grad-start: #ffffff; --grad-mid: #7fe9ff; --err-bg: rgba(255,90,100,.1); --err-line: rgba(255,90,100,.3); --err-text: #ff8f98; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.4); color-scheme: dark; } /* The gradient A turns white on dark backgrounds, wherever it appears. */ [data-theme="dark"] img[src$="/assets/logo.svg"] { filter: brightness(0) invert(1); } /* ---------- theme switch ---------- */ .theme-switch { position: relative; } .ts-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .2s; } .ts-btn:hover { background: var(--surface); } .ts-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px -12px rgba(0,0,0,.35); display: none; } .theme-switch.open .ts-menu { display: grid; gap: 2px; } .ts-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer; padding: 9px 10px; border-radius: 9px; font: 500 14px var(--font); color: var(--text); text-align: left; } .ts-menu button:hover { background: var(--surface-2); } .ts-menu button svg:last-child { margin-left: auto; color: var(--cyan-2); visibility: hidden; } .ts-menu button[aria-checked="true"] { font-weight: 600; } .ts-menu button[aria-checked="true"] svg:last-child { visibility: visible; } .ts-menu small { display: block; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }