/* ── Cassandra theme system ─────────────────────────────────────────────────── 4 themes, applied via: Default: dark-minimal All apps load this file. All color references use these CSS variables. ─────────────────────────────────────────────────────────────────────────── */ /* ── dark-minimal (default) ─────────────────────────────────────────────── */ :root, [data-theme="dark-minimal"] { /* rev_937: semantic z-layers — the 4-token scale replacing the 35-value free-for-all the design map surfaced. New code uses ONLY these: raise → hover cards, dropdowns inside content sticky → toolbars, pinned headers (topbar sits here) overlay → modals, drawers, slot pickers (beats legacy 9999s) toast → notifications, always on top */ --csa-z-raise: 10; --csa-z-sticky: 100; --csa-z-overlay: 10000; --csa-z-toast: 12000; color-scheme: dark; /* rev_640: native dropdowns render dark, not white */ --csa-bg: #111111; --csa-bg2: #1c1c1c; --csa-bg3: #262626; --csa-topbar: #141414; --csa-sidebar: #161616; --csa-text: #e8e8e8; --csa-muted: #b7b7b7; /* rev_1029: readability — was #a0a0a0 */ --csa-hint: #8f8f8f; /* rev_1029: readability — was #707070 */ --csa-border: #2e2e2e; --csa-border2: #3a3a3a; --csa-accent: #1d9e75; --csa-accent-bg: #0a2018; /* rev_924 audit: tokens that were referenced but never defined. --csa-accent-rgb = the accent as bare RGB triplet, for rgba(var(),a) patterns (equipment.html SVG fills were silently falling back to a blue that didn't match the theme). --csa-danger-bg = dark-tinted danger background, sibling of --csa-accent-bg (toast/panel bgs were riding on hardcoded hex fallbacks). */ --csa-accent-rgb: 29,158,117; --csa-danger-bg: #3a1818; --csa-accent-text:#1d9e75; --csa-danger: #c04040; --csa-logo-bg: #1d9e75; --csa-input-bg: #0f0f0f; --csa-card: #1c1c1c; --csa-overlay: rgba(0,0,0,.6); --csa-shadow: rgba(0,0,0,.4); --csa-toggle-off: #333333; --csa-sidebar-w: 400px; --csa-sidebar-w-sm: 340px; /* rev_457: complete palette — interaction overlays, semantic status, accent/danger variants. */ --csa-hover: rgba(255,255,255,.06); --csa-tint: rgba(255,255,255,.04); --csa-hairline: rgba(255,255,255,.10); --csa-hairline-strong: rgba(255,255,255,.22); --csa-warning-text: #d9913b; --csa-success: #2eb085; --csa-success-soft: rgba(46,176,133,.15); --csa-warning: #d4a92e; --csa-warning-soft: rgba(212,169,46,.15); --csa-info: #4d90e0; --csa-info-soft: rgba(77,144,224,.15); --csa-danger-text: #e8857f; --csa-danger-soft: rgba(224,104,95,.15); --csa-accent-hover: #2bbd8e; --csa-accent-soft: rgba(29,158,117,.15); --csa-on-accent: #ffffff; } /* ── light-minimal ───────────────────────────────────────────────────────── */ [data-theme="light-minimal"] { --csa-bg: #f2f2f0; --csa-bg2: #ffffff; --csa-bg3: #e8e8e6; --csa-topbar: #ffffff; /* rev_1029: header follows the light theme (was #1a1a1a — dark bar with dark text) */ --csa-sidebar: #ffffff; --csa-text: #1a1a1a; --csa-muted: #666666; --csa-hint: #999999; --csa-border: #d4d4d2; --csa-border2: #c0c0be; --csa-accent: #1d9e75; --csa-accent-bg: #e1f5ee; --csa-accent-rgb: 29,158,117; --csa-danger-bg: #fbe7e5; --csa-accent-text:#0f6e56; --csa-danger: #c04040; --csa-logo-bg: #1d9e75; --csa-input-bg: #f8f8f6; --csa-card: #ffffff; --csa-overlay: rgba(0,0,0,.35); --csa-shadow: rgba(0,0,0,.12); --csa-toggle-off: #c8c8c8; --csa-hover: rgba(0,0,0,.05); --csa-tint: rgba(0,0,0,.035); --csa-hairline: rgba(0,0,0,.08); --csa-hairline-strong: rgba(0,0,0,.20); --csa-warning-text: #a86a1f; --csa-success: #0f7d5e; --csa-success-soft: rgba(15,125,94,.12); --csa-warning: #9a6f08; --csa-warning-soft: rgba(154,111,8,.12); --csa-info: #2f6fc0; --csa-info-soft: rgba(47,111,192,.12); --csa-danger-text: #c0392f; --csa-danger-soft: rgba(192,57,47,.10); --csa-accent-hover: #168a68; --csa-accent-soft: rgba(29,158,117,.12); --csa-on-accent: #ffffff; } /* ── App-icon hues (theme-driven — NO hardcoded colors in launcher JS) ────── Each app declares a hue NAME (data-hue on .tile-icon); the theme decides how that hue renders. Dark themes: deep tinted box + bright glyph. Light theme: soft neutral-tinted box + saturated glyph. Add a hue here, never in JS. */ :root, [data-theme="dark-minimal"]{ --hue-green-bg:#0f3028; --hue-green-fg:#1d9e75; --hue-purple-bg:#1c1a2e; --hue-purple-fg:#9080d0; --hue-teal-bg:#101f2a; --hue-teal-fg:#4a9aa0; --hue-cyan-bg:#08161c; --hue-cyan-fg:#40b0c0; --hue-blue-bg:#0e1a28; --hue-blue-fg:#4080d0; --hue-orange-bg:#2a1a10; --hue-orange-fg:#d07030; --hue-pink-bg:#251a2a; --hue-pink-fg:#c060c0; --hue-gold-bg:#1a1a10; --hue-gold-fg:#c0a020; --hue-indigo-bg:#1a1020; --hue-indigo-fg:#8060c0; --hue-magenta-bg:#1e1020;--hue-magenta-fg:#a030b0; --hue-red-bg:#1a0e0e; --hue-red-fg:#e05050; } [data-theme="light-minimal"]{ /* one neutral tinted box for all; the glyph keeps the app hue (saturated for light) */ --hue-green-bg:rgba(0,0,0,.05); --hue-green-fg:#12855f; --hue-purple-bg:rgba(0,0,0,.05); --hue-purple-fg:#6a58b8; --hue-teal-bg:rgba(0,0,0,.05); --hue-teal-fg:#2f7f86; --hue-cyan-bg:rgba(0,0,0,.05); --hue-cyan-fg:#2593a6; --hue-blue-bg:rgba(0,0,0,.05); --hue-blue-fg:#2f6fc0; --hue-orange-bg:rgba(0,0,0,.05); --hue-orange-fg:#c15e1f; --hue-pink-bg:rgba(0,0,0,.05); --hue-pink-fg:#a844a8; --hue-gold-bg:rgba(0,0,0,.05); --hue-gold-fg:#977d10; --hue-indigo-bg:rgba(0,0,0,.05); --hue-indigo-fg:#6a54b0; --hue-magenta-bg:rgba(0,0,0,.05); --hue-magenta-fg:#932a9e; --hue-red-bg:rgba(0,0,0,.05); --hue-red-fg:#cc3b3b; } /* ── Shared component styles (theme-aware) ───────────────────────────────── */ /* NOTE rev_236: .csa-topbar / .csa-topbar-* classes removed — topbar.js owns the live topbar via .csa-tb-* classes injected as