/* themes.css - IT66 UI theme/skin token overrides. * * Each skin overrides the :root design tokens (defined in style.css) under a * `:root[data-theme=""]` selector. themes.js flips the data-theme attribute * on ; the FOUC guard sets it before first paint. Because every * panel/border/accent already reads these vars, a skin re-colors the WHOLE UI * for free, no per-component CSS. * * "midnight" is the default and has NO block here: it falls through to the base * :root in style.css, so the default look stays byte-identical to pre-themes. * * Registry (id -> label) lives in themes.js. Token set: * --bg --bg2 --bg3 --fg --fg-dim --accent --accent2 --narrator * --input-bg --border --green --yellow --cyan * (--sidebar-width / --right-panel-width are layout, left untouched here.) * * HARD constraint: the dense CLI text must stay legible in every skin, so each * keeps a dark-ish surface with light-on-dark text (WCAG AA on body copy). * High Contrast is the accessibility/legibility option (near-black + bright fg). */ /* Weathered Wood - warm aged-timber panels, brass accents, parchment-ish text. The user's headline idea. Kept dark enough that light text stays readable; the wood "feel" comes from warm browns + brass, not a light background. */ :root[data-theme="wood"] { --bg: #2a1f16; --bg2: #35281c; --bg3: #1d150e; --fg: #ecdcc2; --fg-dim: #a3886a; --accent: #c98a3c; --accent2: #4a3320; --narrator: #d9b884; --input-bg: #1a120b; --border: #5a4326; --green: #8fbf6a; --yellow: #e0b341; --cyan: #6fb8a8; } /* Iron - dark forged-metal panels, steel-blue accents, cold readable text. */ :root[data-theme="iron"] { --bg: #1c2127; --bg2: #242c34; --bg3: #141a1f; --fg: #d9dee4; --fg-dim: #8a949e; --accent: #5fa8d3; --accent2: #2a3a47; --narrator: #9cc3dd; --input-bg: #11161b; --border: #3a444d; --green: #6fcf97; --yellow: #e4c95b; --cyan: #5fc8d8; } /* Stone - cool grey carved-stone slabs, chiseled borders, moss-green accents. */ :root[data-theme="stone"] { --bg: #232527; --bg2: #2c2f31; --bg3: #181a1b; --fg: #d6d8d6; --fg-dim: #8d908f; --accent: #7fae6a; --accent2: #353a37; --narrator: #a9c79a; --input-bg: #141516; --border: #45494b; --green: #7fc78a; --yellow: #d8c468; --cyan: #74c0bd; } /* High Contrast - accessibility/legibility skin. Near-black surfaces, bright high-contrast foreground + accents for maximum readability. */ :root[data-theme="contrast"] { --bg: #000000; --bg2: #0a0a0a; --bg3: #000000; --fg: #ffffff; --fg-dim: #c8c8c8; --accent: #ffd400; --accent2: #1a1a1a; --narrator: #5fe0ff; --input-bg: #000000; --border: #888888; --green: #4ade80; --yellow: #ffe000; --cyan: #22d3ee; }