/* Dark theme — Space-only addition (the site build ships the paper theme only). * * The app's palette is a Tailwind v4 @theme block, so every utility resolves its * colour through var(--color-*). Redefining those variables is therefore the * whole theme: no component knows this file exists. * * Same instrument character, inverted: warm near-black instead of warm paper, * hairlines that read as rules rather than shadows, and the one signal orange * kept — nudged brighter, because #ff4b00 on near-black is the colour that has * to carry every state (cursor, working, error, send). * * Applied when the document asks for it (data-theme="dark") or when the system * does and the document has not asked for light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-void: #131310; --color-panel: #1a1a16; --color-panel-2: #23231d; --color-edge: #33332b; --color-edge-2: #4a4a40; --color-ink: #ece9df; --color-ink-dim: #b0ada2; --color-ink-faint: #7d7a70; --color-pi: #ff5a1f; --color-pi-2: #ff8a5c; --color-soyuz: #ff8a5c; --color-mint: #b0ada2; } } :root[data-theme="dark"] { color-scheme: dark; --color-void: #131310; --color-panel: #1a1a16; --color-panel-2: #23231d; --color-edge: #33332b; --color-edge-2: #4a4a40; --color-ink: #ece9df; --color-ink-dim: #b0ada2; --color-ink-faint: #7d7a70; --color-pi: #ff5a1f; --color-pi-2: #ff8a5c; --color-soyuz: #ff8a5c; --color-mint: #b0ada2; } /* The theme switch. Bracketed text, like every other control in this UI; it sits * in the one corner the app leaves empty, and stays quiet until pointed at. */ #pi-theme-toggle { position: fixed; right: 10px; bottom: 26px; z-index: 2147483000; padding: 2px 6px; border: none; background: transparent; color: var(--color-ink-faint); font: 11px/1.4 "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; cursor: pointer; opacity: 0.55; } #pi-theme-toggle:hover { opacity: 1; color: var(--color-pi); }