/* Shared theme layer for the pseudopod portal. * Default (no attribute) = the dark bio-instrument palette each page defines in * :root. This file adds the "coral husk" LIGHT theme (a sun-bleached tidepool: * pale dried-coral parchment with living-coral accents) as an override keyed on * , plus the amoeba theme-toggle glyph. The terminal * "scope" (report player / live xterm) intentionally stays dark in both themes — * a dark instrument screen inset into a light lab bench. */ html[data-theme="light"] { --ink: #f3ece1; /* husk parchment (page base) */ --panel: #fbf6ee; /* bleached-husk card */ --panel-2: #ece0cf; /* deeper husk (code / insets) */ --membrane: #e0d2bd; /* husk-tan border */ --membrane-lit: #cbb598; /* lit border / corner brackets */ --cyto: #ec6a52; /* living coral — the signature accent */ --cyto-dim: #c9523d; /* dim coral */ --amber: #b57a2e; /* deeper ochre (readable on light) */ --amber-dim: #9c6f2e; --danger: #cf4436; --text: #33291e; /* warm sepia-charcoal */ --muted: #8b7a64; /* husk-taupe */ --faint: #b8a894; /* faint husk */ --opus: #9a5b8f; /* muted plum (live-view Opus lane) */ --opus-dim: #7a4770; } /* MEDIUM theme — a "twilight slate": lifted off the near-black dark for softer contrast / less eye-strain, still dark enough for light text, keeping the brand teal. The third stop in the toggle cycle (dark → medium → light). */ html[data-theme="medium"] { --ink: #1e2c28; --panel: #26352f; --panel-2: #2e3f38; --membrane: #3e5a52; --membrane-lit: #52746b; --cyto: #48ddc5; --cyto-dim: #329586; --amber: #e8ad63; --amber-dim: #9c7a48; --danger: #ff7b7b; --text: #dbeae4; --muted: #9bb2ab; --faint: #647c74; --opus: #b48ead; --opus-dim: #8a6a80; } /* Unlike light mode, medium does NOT re-assert a dark pane palette: its --text is already light, so the panes take the medium slate directly and the theme is actually visible across the console (terminals still render dark via their own xterm background). */ html[data-theme="medium"] body { background: radial-gradient(130% 70% at 85% -15%, #2b463f 0%, rgba(43,70,63,0) 55%), var(--ink); } html[data-theme="medium"] amoeba-waffle { --aw-accent: #48ddc5; --aw-panel: #26352f; --aw-tile: #2e3f38; --aw-border: #3e5a52; --aw-text: #dbeae4; --aw-muted: #9bb2ab; } /* Medium toggle glyph: a half-woken amoeba — teal outline but the nucleus fully lit and a faint teal fill (between dark's hollow and light's full coral). */ html[data-theme="medium"] .theme-toggle .amoeba-body { fill: rgba(72, 221, 197, .24); stroke: var(--cyto); } html[data-theme="medium"] .theme-toggle .amoeba-nucleus { fill: var(--cyto); opacity: 1; } /* DUSK theme — a dimmed, muted "coral husk": softer and less bright than the full light theme (easier on the eyes), still the warm parchment family. Fourth stop in the cycle (dark → medium → dusk → light). Its panes follow the theme — only the terminal scope stays dark (see the .pane:has(.scope) rule below). */ html[data-theme="dusk"] { --ink: #ddd2c1; --panel: #e7dccb; --panel-2: #d0c2ab; --membrane: #c2b093; --membrane-lit: #a8926f; --cyto: #d65c44; --cyto-dim: #b3452f; --amber: #97621f; --amber-dim: #855c2a; --danger: #bf3a2d; --text: #2c231a; --muted: #776750; --faint: #a5947c; --opus: #8a4e80; --opus-dim: #6e3f66; } html[data-theme="dusk"] body { background: radial-gradient(130% 70% at 85% -15%, #ecd8cc 0%, rgba(236,216,204,0) 55%), var(--ink); } html[data-theme="dusk"] button.primary:hover:not(:disabled) { background: #d65c44; border-color: #d65c44; } html[data-theme="dusk"] amoeba-waffle { --aw-accent: #d65c44; --aw-panel: #e7dccb; --aw-tile: #d0c2ab; --aw-border: #c2b093; --aw-text: #2c231a; --aw-muted: #776750; } html[data-theme="dusk"] .theme-toggle .amoeba-body { fill: rgba(214, 92, 68, .82); stroke: var(--cyto-dim); } html[data-theme="dusk"] .theme-toggle .amoeba-nucleus { fill: var(--panel); opacity: .9; } /* The page-body radial glow each page hardcodes is a dark teal; warm it for light. */ html[data-theme="light"] body { background: radial-gradient(130% 70% at 85% -15%, #fbe4da 0%, rgba(251,228,218,0) 55%), var(--ink); } /* Console chrome: the primary-button hover is a hardcoded bright cyan; warm it to a lifted coral in light mode (the terminal panes stay dark by design). */ html[data-theme="light"] button.primary:hover:not(:disabled) { background: #f4795b; border-color: #f4795b; } /* Only the TERMINAL pane stays a dark instrument in the non-dark themes — every other pane (companion / docs / wiki) follows the theme so the whole console reads in one palette. The terminal pane is the one containing the .scope terminal display; re-assert the dark palette inside it so the terminal window reads black on a light bench, matching the xterm scope it wraps. */ html[data-theme="light"] .pane:has(.scope), html[data-theme="dusk"] .pane:has(.scope), html[data-theme="medium"] .pane:has(.scope) { --ink: #06100e; --panel: #0a1714; --panel-2: #0d201c; --membrane: #163029; --membrane-lit: #245247; --cyto: #3fd9bf; --cyto-dim: #2a8576; --amber: #e6a85c; --amber-dim: #8a6a3a; --danger: #ff6b6b; --text: #cfe0db; --muted: #6f8983; --faint: #3a4f4a; } /* amoeba-waffle app switcher: pseudopod cyto tokens (WAFFLE.md theming section), with a coral-husk override in light mode so the switcher follows the app theme. CSS custom properties pierce the component's shadow DOM. */ amoeba-waffle { --aw-accent: #3fd9bf; --aw-panel: #0a1714; --aw-tile: #0d201c; --aw-border: #163029; --aw-text: #cfe0db; --aw-muted: #6f8983; } html[data-theme="light"] amoeba-waffle { --aw-accent: #ec6a52; --aw-panel: #fbf6ee; --aw-tile: #ece0cf; --aw-border: #e0d2bd; --aw-text: #33291e; --aw-muted: #8b7a64; } /* ---- amoeba theme toggle (the signature) --------------------------------- */ .theme-toggle { margin-left: .7rem; flex: none; background: none; border: 0; padding: .25rem; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; } .theme-toggle:focus-visible { outline: 2px solid var(--cyto); outline-offset: 2px; } .theme-toggle .amoeba-body { fill: transparent; stroke: var(--cyto); stroke-width: 1.5; transform-origin: center; transition: fill .38s ease, stroke .38s ease, transform .5s cubic-bezier(.5,-0.5,.35,1.5); } .theme-toggle .amoeba-nucleus { fill: var(--cyto); opacity: .5; transition: fill .38s ease, opacity .38s ease; } .theme-toggle:hover .amoeba-body { transform: scale(1.09) rotate(8deg); } .theme-toggle:active .amoeba-body { transform: scale(.94) rotate(-6deg); } /* Light mode: the amoeba fills with coral and basks. */ html[data-theme="light"] .theme-toggle .amoeba-body { fill: var(--cyto); stroke: var(--cyto-dim); } html[data-theme="light"] .theme-toggle .amoeba-nucleus { fill: var(--panel); opacity: 1; } @media (prefers-reduced-motion: reduce) { .theme-toggle .amoeba-body, .theme-toggle .amoeba-nucleus { transition: none; } }