/* ═══════════════════════════════════════════════════════════════════════ EHDM Light Theme Fix — Fase 9b ─────────────────────────────────────────────────────────────────────── ROOT CAUSE of the broken light theme: applyTheme() only swaps ten CSS variables (--bg/--text/--border families), but bundle.css contains a late "dark-skin polish" pass that hardcodes WHITE text and DARK gradient panels with !important — those rules ignore the variables entirely, so in light mode you get white-on-white labels and dark islands (arc bar, zoom row, timeline, legend). THE FIX: ehdm-theme-fix.js toggles `theme-light` on ; every rule here is scoped under that class and uses !important to beat the dark- skin !important rules (this file loads after bundle.css, so it wins the cascade at equal specificity+importance). Scope rule: ONLY corrective overrides for the light theme live here. Nothing in this file affects dark mode. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · Sequencer grid cells — white text → ink ──────────────────── */ html.theme-light .seq-cell-title { color: rgba(24, 20, 14, .92) !important; } html.theme-light .seq-cell-sub { color: rgba(24, 20, 14, .58) !important; } html.theme-light .cell-iv-lbl { color: rgba(24, 20, 14, .55) !important; } html.theme-light .cell-iv-slider { background: rgba(0, 0, 0, .18) !important; } html.theme-light .seq-cell-menu { background: rgba(255, 255, 255, .55) !important; color: rgba(24, 20, 14, .6) !important; } html.theme-light .seq-cell-menu:hover { background: rgba(255, 255, 255, .85) !important; color: rgba(24, 20, 14, .95) !important; } /* Bottom "depth" fade inside cells: fade to paper, not to black */ html.theme-light .seq-cell-inner::after { background: linear-gradient(to bottom, transparent, rgba(240, 237, 232, .55)) !important; } /* Section-colored cell gradients: keep the hue, drop the black tail */ html.theme-light .seq-cell.s0 { background: linear-gradient(145deg, rgba(0,180,180,.28) 0%, rgba(0,160,160,.12) 60%, rgba(255,255,255,.10) 100%) !important; } html.theme-light .seq-cell.s1 { background: linear-gradient(145deg, rgba(60,180,100,.28) 0%, rgba(50,160,80,.12) 60%, rgba(255,255,255,.10) 100%) !important; } html.theme-light .seq-cell.s2 { background: linear-gradient(145deg, rgba(220,70,90,.30) 0%, rgba(180,40,60,.14) 60%, rgba(255,255,255,.10) 100%) !important; } html.theme-light .seq-cell.s3 { background: linear-gradient(145deg, rgba(150,70,220,.28) 0%, rgba(110,40,180,.12) 60%, rgba(255,255,255,.10) 100%) !important; } html.theme-light .seq-cell.s4 { background: linear-gradient(145deg, rgba(210,170,60,.30) 0%, rgba(180,140,40,.14) 60%, rgba(255,255,255,.10) 100%) !important; } html.theme-light .seq-cell.s5 { background: linear-gradient(145deg, rgba(60,190,200,.28) 0%, rgba(40,160,168,.12) 60%, rgba(255,255,255,.10) 100%) !important; } /* ── 2 · Section column headers + timeline ruler ──────────────────── */ html.theme-light .sec-col-name { color: rgba(24, 20, 14, .85) !important; } html.theme-light .sec-col-dur { color: rgba(24, 20, 14, .48) !important; } html.theme-light .seq-time-mark { color: rgba(24, 20, 14, .50) !important; } html.theme-light .seq-timeline-offset { color: rgba(24, 20, 14, .55) !important; } html.theme-light .seq-timeline { background: rgba(0, 0, 0, .06) !important; } /* ── 3 · Intensity (arc) panel — dark island → paper panel ────────── */ html.theme-light .arc-bar { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.09)) !important; } html.theme-light .arc-bar-labels .arc-label { color: rgba(24, 20, 14, .60) !important; } html.theme-light .arc-label { color: rgba(24, 20, 14, .60) !important; } html.theme-light .arc-mode-btn { color: rgba(24, 20, 14, .50) !important; border-color: rgba(0,0,0,.22) !important; } html.theme-light .arc-mode-btn:hover { color: rgba(24, 20, 14, .85) !important; } html.theme-light .arc-legend { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)) !important; border-color: rgba(0,0,0,.15) !important; } html.theme-light .arc-legend-item { color: rgba(24, 20, 14, .78) !important; } html.theme-light .arc-fs-btn { background: rgba(0, 0, 0, .10) !important; color: rgba(24, 20, 14, .60) !important; } html.theme-light .arc-fs-btn:hover { color: rgba(24, 20, 14, .95) !important; } /* ── 4 · Zoom row + section-jump pills (INTRO / VERSE / …) ────────── */ html.theme-light .zoom-row { background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02)) !important; } html.theme-light .zoom-reset { color: rgba(24, 20, 14, .55) !important; } html.theme-light .zoom-reset:hover { color: rgba(24, 20, 14, .90) !important; } html.theme-light .sec-jump-btn { background: rgba(0, 0, 0, .08) !important; color: rgba(24, 20, 14, .62) !important; border-color: rgba(0, 0, 0, .18) !important; } html.theme-light .sec-jump-btn:hover { color: rgba(24, 20, 14, .95) !important; background: rgba(0, 0, 0, .13) !important; } /* ── 5 · Info bar (DURATION / SECTIONS / INSTRUMENTS) ─────────────── */ html.theme-light .dur-bar, html.theme-light .section-info-bar, html.theme-light .duration-bar, html.theme-light .seq-info-bar { background: rgba(0, 0, 0, .05) !important; } /* ── 6 · BLEND chips + Simple-Mode chips ──────────────────────────── */ html.theme-light .blend-chip-name { color: rgba(24,20,14,.62) !important; } html.theme-light .blend-chip-pct { color: rgba(24,20,14,.50) !important; } html.theme-light .blend-chip.is-primary .blend-chip-name { color: rgba(24,20,14,.86) !important; } html.theme-light .sm2-chip { color: rgba(24,20,14,.72) !important; } /* ── 7 · Topbar polish — stronger icon contrast on paper ──────────── */ html.theme-light .btn-icon { color: var(--text2) !important; } html.theme-light .btn-icon:hover { color: var(--text) !important; } /* ── 8 · Optimization Intelligence panel (Fase 9) on light ────────── */ /* The panel uses rgba(255,255,255,.0x) card backgrounds designed for a dark canvas; flip them to ink-tinted so the cards still read as cards. */ html.theme-light .ehdm-optim-layer .ehdm-optim-section { background: rgba(0,0,0,.025) !important; } html.theme-light .ehdm-optim-layer .ehdm-optim-section summary:hover { background-color: rgba(0,0,0,.045); } /* ── 9 · Leave intentionally dark (legibility preserved, by design) ─ .gp-footer (global prompt footer), #arcDragTip, .fs-cursor-tip, .global-search / .gsearch-overlay (modal scrims), .pneuma-arc-container: these are self-contained dark surfaces with light text — they remain readable on either theme and re-skinning them adds risk for no gain. */