/* Scope V2 — colors. Dark is the default (broadcast) theme; [data-theme="light"] is the peer light theme (inverted broadcast: panels go light, viewer + teletext wells stay dark). Values sourced from QueueSee src/App/Themes/QueueSee.Colors.axaml + Fluent accent ramp. */
:root{
/* surfaces (cool near-black) */
--scope-bg-0:#0C0D0E; /* app void / deepest */
--scope-bg-1:#131517; /* panel / module base */
--scope-bg-2:#191C1F; /* raised: buttons, headers, chrome */
--scope-bg-3:#22262B; /* hover / active raised */
--scope-line:#2A2F34; /* hairline border */
--scope-line-2:#373D43; /* stronger border */
/* ink */
--scope-ink-1:#F2F5F4; /* primary text */
--scope-ink-2:#AEB6BB; /* secondary */
--scope-ink-3:#7B848A; /* tertiary / micro-labels — 4.5:1 on bg-1/bg-2 (was #6D777D, 3.96:1 — failed AA at 9-10px) */
/* signal green — the only interactive accent */
--scope-green:#4CAF50;
--scope-green-hi:#67D06B; /* hover / active / glow (light theme: darker instead) */
--scope-green-lo:#A5D6A7; /* RMS / secondary meter */
--scope-green-tint:rgba(76,175,80,.16); /* active/segmented fill wash */
--scope-green-tint-strong:rgba(76,175,80,.22); /* selected+hover wash */
--scope-on-accent:var(--scope-bg-0); /* ink/glyphs sitting ON a green fill — dark here, paper in light */
--scope-on-green-lo:#0C0D0E; /* green-lo is the lightest rung in BOTH themes (meter RMS), so it takes this same dark ink in both — 12.4:1 on #A5D6A7, 5.1:1 on #3C9440. No light-theme override: ink-1 (#16191B) actually tests worse (4.59:1). */
/* amber — playhead + monitored-pair signal ONLY */
--scope-amber:#FFB300;
/* over / clip / fault */
--scope-red:#FF5252;
/* meter / waveform wells */
--scope-wave-bg:#000000;
--scope-meter-col-bg:#0A0C0D;
--scope-meter-gap:#05070A;
--scope-meter-peak-cap:#D6F2D8;
/* composites */
--scope-play-btn-bg:#12180F; /* green-lit play button fill */
--scope-play-glow:rgba(76,175,80,.20); /* 0 0 16px */
--scope-outline-btn-bg:rgba(14,16,17,.80); /* generate-waveform fill */
--scope-scrim:rgba(12,13,14,.70); /* modal dim */
--scope-hud-bg:rgba(14,16,17,.90); /* fullscreen HUD card */
--scope-chip-overlay-bg:rgba(19,21,23,.85); /* fullscreen TC chip */
--scope-shadow-dialog:0 12px 48px rgba(0,0,0,.63);
/* permanent dark wells — SAME in both themes (video + teletext never invert) */
--scope-well:#000000; /* video picture area */
--scope-well-surface:#0E1011; /* teletext screen, viewer empty state */
--scope-ink-well:#7B848A; /* quiet ink ON a well — SAME in both themes (5.5:1 on #000); ink-3 would invert with the panel and vanish */
/* semantic aliases */
--scope-surface-app:var(--scope-bg-0);
--scope-surface-panel:var(--scope-bg-1);
--scope-surface-raised:var(--scope-bg-2);
--scope-surface-hover:var(--scope-bg-3);
--scope-text-body:var(--scope-ink-1);
--scope-text-secondary:var(--scope-ink-2);
--scope-text-micro:var(--scope-ink-3);
--scope-accent:var(--scope-green);
--scope-accent-hover:var(--scope-green-hi);
--scope-focus-ring:var(--scope-green);
--scope-playhead:var(--scope-amber);
--scope-danger:var(--scope-red);
color-scheme:dark;
}
/* Light theme — "inverted broadcast". Cool paper greys; green darkens (from the app's own accent ramp SystemAccentColorDark1..3) instead of brightening on hover; amber darkens for contrast. Video viewer + teletext wells keep the dark values above. */
[data-theme="light"]{
--scope-bg-0:#D9DDE0;
--scope-bg-1:#F2F4F5;
--scope-bg-2:#E6EAEC;
--scope-bg-3:#DADFE2;
--scope-line:#C7CDD2;
--scope-line-2:#A9B2B8;
--scope-ink-1:#16191B;
--scope-ink-2:#4C555B;
--scope-ink-3:#616A70; /* 4.5:1 on bg-1/bg-2 (was #7D868C, 3.36:1) */
--scope-green:#2F7A33;
--scope-green-hi:#215626;
--scope-green-lo:#3C9440; /* also the waveform RMS overlay — must hold up on the light wave-bg */
--scope-green-tint:rgba(47,122,51,.14);
--scope-green-tint-strong:rgba(47,122,51,.20);
--scope-on-accent:#F2F4F5; /* bg-0 is paper here — green needs a light ink, not a grey one */
--scope-amber:#8A6200; /* 4.7:1 on wave-bg, 5.0:1 on bg-1 — amber is used at 9-10px (monitored pair), so it must pass small-text AA, not just the 3:1 a graphic needs */
--scope-red:#C62F2F;
--scope-wave-bg:#E9EDEF;
--scope-meter-col-bg:#DFE4E7;
--scope-meter-gap:#CBD2D6;
--scope-meter-peak-cap:#215626;
--scope-play-btn-bg:#E4EFE0;
--scope-play-glow:rgba(47,122,51,.18);
--scope-outline-btn-bg:rgba(242,244,245,.80);
--scope-scrim:rgba(58,63,66,.45);
--scope-hud-bg:rgba(242,244,245,.92);
--scope-chip-overlay-bg:rgba(242,244,245,.88);
--scope-shadow-dialog:0 12px 48px rgba(22,25,27,.28);
color-scheme:light;
}