/* Powerwave appearance (Light/Dark) theme tokens.
 *
 * Shared across every static frontend page (index.html,
 * waveform-prototype.html, and any future page) via a plain <link>, the
 * same static-file pattern already used for config.js -- no build step,
 * no framework (see docs/architecture/oruxa-architecture.md).
 *
 * Light is the default/preferred direction (no [data-theme] attribute, or
 * data-theme="light"); Dark is opt-in via [data-theme="dark"], set by
 * theme.js from the user's saved preference. Values are an original Oruxa
 * palette -- not derived from or matching Detego's visual identity; Detego
 * is a UI/UX workflow benchmark only, never a source of colors (see
 * docs/project-memory/PRODUCT_REFERENCES.md).
 *
 * Every page that includes this file must render correctly using ONLY
 * these custom properties for color -- no page should hard-code a literal
 * color that differs between the two themes.
 */
:root {
    /* ---- Light (default) ---- */
    --bg: #f3f5f9;
    --panel: #ffffff;
    --panel-border: #d9dfea;
    --text: #1b2333;
    --text-dim: #5c6579;
    --accent: #3568d4;
    --accent-dim: #c7d7f7;
    --ok: #1f9d63;
    --warn: #b8720a;
    --error: #d23c44;

    /* Waveform/toolbar surfaces -- distinct tokens per the theme design
       (kept equal to --panel/a slightly different neutral today, but named
       separately so a future page can diverge from the generic panel
       surface without inventing a new token then). */
    --waveform-surface: #ffffff;
    --toolbar-surface: #f8f9fc;

    /* Subtle tint/wash tokens -- replace what used to be hard-coded
       rgba(255,255,255,...)/rgba(0,0,0,...) literals scattered per-page.
       Each one is intentionally theme-relative (an alpha-blended version
       of a base token), not a fixed color, so it reads correctly against
       either theme's own --bg/--panel. */
    --hover-tint: rgba(27, 35, 51, 0.035);
    --surface-tint: rgba(27, 35, 51, 0.025);
    --accent-wash: rgba(53, 104, 212, 0.10);
    --accent-wash-soft: rgba(53, 104, 212, 0.07);
    /* Phase 4B-UAT2: the A/B cursor range-highlight fill -- same blue base
       as --accent-wash. Went 0.05 -> 0.20 (Phase 4B-UAT1) -> 0.08 (this
       pass, owner's final acceptance target) while still sitting visually
       behind cursor A/B and every waveform trace, never competing with
       them. */
    --cursor-range-fill: rgba(53, 104, 212, 0.08);
    --ok-wash: rgba(31, 157, 99, 0.12);
    --error-wash: rgba(210, 60, 68, 0.10);
    --overlay-backdrop: rgba(27, 35, 51, 0.35);
    --chart-overlay-bg: rgba(255, 255, 255, 0.92);

    /* Plotly spike-line (crosshair) color -- theme-sensitive; read at
       runtime via getComputedStyle, see waveform-prototype.html. Owner UAT
       (this pass) found the prior rgba(92,101,121,0.42) too faint against
       the light waveform surface -- darkened toward --text and raised
       alpha modestly (0.42 -> 0.6) for stronger contrast, deliberately
       stopping short of full opacity so it stays visually secondary to
       the waveform trace itself. */
    --spike-color: rgba(60, 68, 87, 0.6);

    --radius: 8px;

    /* Phase 3B-UAT9: slim borderless scrollbars, applied globally (see
       the rule set below, right after the [data-theme="dark"] block).
       Same alpha-over-a-neutral-base convention as --hover-tint/
       --surface-tint above (rgba(27,35,51,...) for Light, rgba(255,255,
       255,...) for Dark) -- not a new, unrelated color, just a stronger
       alpha of the SAME base so the thumb reads as "part of this theme's
       neutral scale," not an arbitrary accent. */
    --scrollbar-thumb: rgba(27, 35, 51, 0.18);
    --scrollbar-thumb-hover: rgba(27, 35, 51, 0.32);

    /* Phase 4E-UAT3: Free Text Note's own semantic surface -- previously
       reused --panel/--panel-border, which visually blended the note into
       waveform panels sitting right behind it. A subtle warm cream "paper
       note" surface, deliberately far short of a saturated yellow
       sticky-note look, distinguishes it at a glance without competing
       with waveform trace colors or the A/B cursor blue/red. */
    --annotation-bg: #dfe7fb;
    --annotation-border: #a0dce3;

    /* Phase 4F (DEC-045): Callout's own connector/anchor-marker accent --
       a distinct hue family from --accent (A/B cursor "A"/blue),
       --error (A/B cursor "B"/red), AND --annotation-bg/-border (the
       note surface itself), so a Callout marker reads clearly against
       any of them rather than blending in or being mistaken for a
       measurement cursor. */
    --annotation-callout-accent: #b56a0f;

    /* Phase 4G (DEC-046): +Peak/-Peak's own connector/anchor-marker
       accent -- a distinct hue family from --accent (A/B cursor "A"/blue),
       --error (A/B cursor "B"/red), --annotation-callout-accent
       (Callout's own amber), AND --annotation-bg/-border, so a Peak
       marker reads clearly against any of them. A muted teal-green,
       deliberately not alarm red (section 25's own "do not use alarm red
       just because it is a maximum/minimum") and not the A/B cursor
       colors (section 25's explicit prohibition) -- one shared accent for
       BOTH +Peak and -Peak; the label prefix/glyph, not color, is what
       distinguishes maximum from minimum. */
    --annotation-peak-accent: #2f8f6f;

    /* Sequence Components v1: positive/negative/zero-sequence identity --
       a distinct hue family from --accent/--warn/--ok (already claimed by
       phase A/B/C, --ww-phase-a/b/c in index.html) and from --error (red,
       already "problem" app-wide). Sequence identity is a DIFFERENT
       concept from phase identity (a Va/Vb/Vc reading vs. its own V0/V1/V2
       decomposition can appear side by side), so it deliberately does not
       borrow any phase-A/B/C color. Violet/teal/magenta, distinct enough
       from --annotation-peak-accent's own muted teal-green not to be
       mistaken for a Peak marker. */
    --ww-seq-positive: #6d28d9;
    --ww-seq-negative: #0e7490;
    --ww-seq-zero: #a21caf;

    /* Distance Protection v1: Zone 1/2/3 characteristic/trip-point
       identity -- a restrained, single-hue (slate) family distinct from
       --accent/--warn/--ok (phase A/B/C), --ww-seq-positive/-negative/
       -zero (sequence identity), and --error (already "problem"
       app-wide; Zone geometry is measurement/element-state, never an
       alarm). Strongest-to-lightest hierarchy (owner requirement: Zone 1
       strongest, Zone 2 medium, Zone 3 lightest visual identity) is
       expressed as darker-to-lighter slate in Light mode. */
    --ww-dist-zone1: #334155;
    --ww-dist-zone2: #64748b;
    --ww-dist-zone3: #94a3b8;
}

:root[data-theme="dark"] {
    /* ---- Dark (opt-in) ---- */
    --bg: #0f1420;
    --panel: #161d2e;
    --panel-border: #2a3348;
    --text: #e7ecf5;
    --text-dim: #8b96ad;
    --accent: #4f8dfd;
    --accent-dim: #2c4a80;
    --ok: #3ecf8e;
    --warn: #f5a623;
    --error: #f2545b;

    --waveform-surface: #161d2e;
    --toolbar-surface: #161d2e;

    --hover-tint: rgba(255, 255, 255, 0.03);
    --surface-tint: rgba(255, 255, 255, 0.02);
    --accent-wash: rgba(79, 141, 253, 0.12);
    --accent-wash-soft: rgba(79, 141, 253, 0.08);
    /* Phase 4B-UAT2: same rationale/change as Light's own
       --cursor-range-fill above -- Dark's own accent blue base, now 0.08. */
    --cursor-range-fill: rgba(79, 141, 253, 0.08);
    --ok-wash: rgba(62, 207, 142, 0.12);
    --error-wash: rgba(242, 84, 91, 0.12);
    --overlay-backdrop: rgba(4, 7, 14, 0.6);
    --chart-overlay-bg: rgba(15, 20, 32, 0.85);

    /* Same UAT finding as Light's --spike-color above, brightened toward
       --text instead of darkened (0.42 -> 0.6 alpha), for the same reason:
       modestly stronger contrast against the dark waveform surface,
       stopping short of full opacity. */
    --spike-color: rgba(168, 178, 199, 0.6);

    --scrollbar-thumb: rgba(255, 255, 255, 0.16);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);

    /* Phase 4E-UAT3: same rationale as Light's own --annotation-bg/
       --annotation-border above -- a muted warm dark surface, deliberately
       far short of a bright yellow/brown block, still readable against
       --text and distinct from --panel/--waveform-surface. */
    --annotation-bg: #2b2416;
    --annotation-border: #4a3f26;

    /* Phase 4F (DEC-045): same rationale as Light's own
       --annotation-callout-accent above -- brightened toward --text for
       dark-surface contrast, same amber family so it reads as "the same
       marker" across themes. */
    --annotation-callout-accent: #e0a344;

    /* Phase 4G (DEC-046): same rationale as Light's own
       --annotation-peak-accent above -- brightened toward --text for
       dark-surface contrast, same teal-green family so it reads as "the
       same marker" across themes. */
    --annotation-peak-accent: #5fc9a0;

    /* Sequence Components v1: same rationale as Light's own
       --ww-seq-positive/-negative/-zero above -- brightened toward --text
       for dark-surface contrast, same violet/teal/magenta family so it
       reads as "the same identity" across themes. */
    --ww-seq-positive: #a78bfa;
    --ww-seq-negative: #22d3ee;
    --ww-seq-zero: #e879f9;

    /* Distance Protection v1: same rationale as Light's own
       --ww-dist-zone1/2/3 above -- same slate family, hierarchy inverted
       to lighter-to-darker (strongest = brightest against the dark
       surface) for dark-surface contrast, mirroring every other
       Light->Dark brightening rule in this file. */
    --ww-dist-zone1: #cbd5e1;
    --ww-dist-zone2: #94a3b8;
    --ww-dist-zone3: #64748b;
}

/* Phase 3B-UAT9: slim, borderless scrollbars -- one shared rule set for
   every scrollable container on every page that links this file
   (index.html, waveform-prototype.html), rather than per-panel rules.
   Applied via a universal selector deliberately (matches the owner's
   own suggested pattern): scrollbar-width/scrollbar-color and the
   ::-webkit-scrollbar family only have any visual effect on elements
   that actually scroll, so this is a no-op everywhere else -- it does
   not touch layout, size, or non-scrollbar borders on any element.
   Firefox: scrollbar-width/scrollbar-color (no ::-webkit-* support).
   Chromium/Safari: the ::-webkit-scrollbar family. No browser-specific
   JS -- CSS only, both paths declared for every element unconditionally
   so neither engine needs a feature check. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
    border: 0;
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 0;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Phase 3B-UAT10: keep the global scrollbar baseline above, but blend
   tracks locally where a transparent gutter can visually expose adjacent
   structural dividers as a "rail". The divider borders stay intact. */
#mainSidebarMenu {
    scrollbar-color: var(--scrollbar-thumb) var(--panel);
}
#mainSidebarMenu::-webkit-scrollbar-track,
#mainSidebarMenu::-webkit-scrollbar-track-piece {
    background: var(--panel);
    border: 0;
}
#mainSidebarMenu::-webkit-scrollbar-corner {
    background: var(--panel);
}
#workspaceSidebar {
    scrollbar-color: var(--scrollbar-thumb) var(--bg);
}
#workspaceSidebar::-webkit-scrollbar-track,
#workspaceSidebar::-webkit-scrollbar-track-piece {
    background: var(--bg);
    border: 0;
}
#workspaceSidebar::-webkit-scrollbar-corner {
    background: var(--bg);
}
/* Event Reconstruction Slice 0: its left recording panel sits on the
   same --bg surface as the Waveform Workspace Sidebar, so it blends its
   scrollbar track the same way. */
#wwErSidebar {
    scrollbar-color: var(--scrollbar-thumb) var(--bg);
}
#wwErSidebar::-webkit-scrollbar-track,
#wwErSidebar::-webkit-scrollbar-track-piece {
    background: var(--bg);
    border: 0;
}
#wwErSidebar::-webkit-scrollbar-corner {
    background: var(--bg);
}
.group-editor-box,
.group-body {
    scrollbar-color: var(--scrollbar-thumb) var(--panel);
}
.group-editor-box::-webkit-scrollbar-track,
.group-editor-box::-webkit-scrollbar-track-piece,
.group-body::-webkit-scrollbar-track,
.group-body::-webkit-scrollbar-track-piece {
    background: var(--panel);
    border: 0;
}
.group-editor-box::-webkit-scrollbar-corner,
.group-body::-webkit-scrollbar-corner {
    background: var(--panel);
}

/* Appearance selector -- a small, deliberately simple segmented control,
   not a settings page (see docs/project-memory/DECISIONS.md DEC-023). */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.theme-toggle button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    line-height: 1.2;
}
.theme-toggle button:hover { color: var(--text); background: var(--hover-tint); }
.theme-toggle button[aria-pressed="true"] {
    background: var(--accent-wash-soft);
    color: var(--accent);
}
.theme-toggle button + button { border-left: 1px solid var(--panel-border); }