/* Ops color opt-in, measured against the live Ops palette and public/navy.css + planes.css. Load AFTER dpt.v5.css and its components. Add dpt-ops-colors to html.dpt-v5. Color only: existing geometry and action/selection behavior remain owned by v5 and the consuming app. Screen-only: light/print islands continue to resolve the base kit tokens. --dp5-line-card is the quiet Ops divider, not a 3:1 control boundary; controls keep --dp5-line-strong and focus keeps the base kit recipe. */ @media screen { html.dpt-v5.dpt-ops-colors:not(.dpt-light), html.dpt-v5.dpt-ops-colors:not(.dpt-light) .dpt-dark:not(.dpt-light):not(.dpt-light *) { --dp5-canvas: #0F1B32; --dp5-surface: #172641; --dp5-raised: #1E3151; --dp5-raised-hover: #26395B; --dp5-raised-press: #2E4468; --dp5-nav: #0A1325; --dp5-nav-hover: #16223D; --dp5-nav-active: #1F2E52; --dp5-mast: #24375A; --dp5-line: #2B3D5D; --dp5-line-canvas: #2B3D5D; --dp5-line-card: #2B3D5D; --dp5-line-strong: rgba(255, 255, 255, .30); --dp5-skel: #26395B; --dp5-tabbar: #0A1325; --dp5-text: #FFFFFF; --dp5-text-2: #D5DCE6; --dp5-text-3: #B8C2D0; --dp5-placeholder: #B8C2D0; /* A missing value ("No team") is readable text, so it lifts with the brighter planes. Disabled keeps the base --dp5-text-off on purpose: lifting it too made a disabled control look live. */ --dp5-text-missing: #A9B4C4; --dp5-ink: #0C1322; --dp5-primary-ink: #0C1322; --dp5-green: #00D68F; --dp5-green-hover: #4DE3AC; --dp5-action: #00D68F; --dp5-action-ink: #0C1322; --dp5-action-hover: #4DE3AC; --dp5-action-press: #00BF80; --dp5-primary: #FFFFFF; --dp5-primary-hover: #E6EAF0; --dp5-primary-press: #D5DCE6; --dp5-good-tint: #09271D; --dp5-warn-tint: #2C220E; --dp5-bad-tint: #2C1A1A; --dp5-info-tint: #151F2C; --dp5-chart-axis: var(--dp5-text-3); --dp5-chart-base: var(--dp5-line); --dp3-chart-axis: var(--dp5-chart-axis); --dp3-chart-grid: var(--dp5-chart-base); /* Re-resolve changed color aliases on root and dark role elements. */ --dp4-bg: var(--dp5-canvas); --dp4-card: var(--dp5-surface); --dp4-card-2: var(--dp5-raised); --dp4-line: var(--dp5-line); --dp4-field: var(--dp5-raised); --dp4-field-line: var(--dp5-raised); --dp4-tabbar: var(--dp5-tabbar); --dp4-text: var(--dp5-text); --dp4-text-2: var(--dp5-text-2); --dp4-text-3: var(--dp5-text-3); --dp4-placeholder: var(--dp5-placeholder); --dp4-good-bg: var(--dp5-good-tint); --dp4-watch-bg: var(--dp5-warn-tint); --dp4-bad-bg: var(--dp5-bad-tint); --dp4-link: var(--dp5-green); --dp4-link-hover: var(--dp5-green-hover); --dp4-green: var(--dp5-green); --dp4-gold: var(--dp5-primary); --dp4-gold-ink: var(--dp5-primary-ink); --dp4-primary: var(--dp5-primary); --dp4-primary-ink: var(--dp5-primary-ink); --dp4-primary-hover: var(--dp5-primary-hover); --dp3-bg: var(--dp5-canvas); --dp3-card: var(--dp5-surface); --dp3-card-2: var(--dp5-raised); --dp3-card-edge: var(--dp5-line); --dp3-line: var(--dp5-line); --dp3-line-strong: var(--dp5-line-strong); --dp3-text: var(--dp5-text); --dp3-text-2: var(--dp5-text-2); --dp3-text-3: var(--dp5-text-3); --dp3-accent: var(--dp5-green); --dp3-accent-hot: var(--dp5-green); --dp3-accent-hot-hover: var(--dp5-green-hover); --dp3-accent-hot-ink: var(--dp5-ink); --dp3-electric: var(--dp5-green); --dp3-electric-ink: var(--dp5-ink); --dp3-action: var(--dp5-primary); --dp3-action-ink: var(--dp5-primary-ink); --dp3-action-hover: var(--dp5-primary-hover); --dp3-neutral: var(--dp5-primary); --dp3-neutral-ink: var(--dp5-primary-ink); --dp3-neutral-hover: var(--dp5-primary-hover); --dp3-link: var(--dp5-green); --dp3-link-hover: var(--dp5-green-hover); --dp3-focus: var(--dp5-text); --dp3-ok-tint: var(--dp5-good-tint); --dp3-warn-tint: var(--dp5-warn-tint); --dp3-danger-tint: var(--dp5-bad-tint); --dp3-info-tint: var(--dp5-info-tint); --dp3-div-mid: var(--dp5-text-3); --dp3-seq-5: var(--dp5-green-hover); --dp3-score-none: var(--dp5-text-3); --dp3-chart-3: var(--dp5-text-3); --dp3-seq-4: var(--dp5-green); --dp2-page: var(--dp5-canvas); --dp2-card: var(--dp5-surface); --dp2-well: var(--dp5-canvas); --dp2-glass: var(--dp5-raised); --dp2-hairline: var(--dp5-line); --dp2-hairline-soft: var(--dp5-line-canvas); --dp2-text: var(--dp5-text); --dp2-text-2: var(--dp5-text-2); --dp2-label: var(--dp5-text-3); --dp2-crit-chip-bg: var(--dp5-bad-tint); --dp2-gold: var(--dp5-primary); --dp2-gold-ink: var(--dp5-primary-ink); --dp2-accent-text: var(--dp5-green); --dp2-action: var(--dp5-primary); --dp2-action-ink: var(--dp5-primary-ink); --dp2-action-hover: var(--dp5-primary-hover); --dp2-nav-item: var(--dp5-text-3); --dp2-nav-active: var(--dp5-green); --dp2-nav-border: var(--dp5-line-canvas); --dp2-nav-bg: var(--dp5-tabbar); --dp2-streak-on: var(--dp5-green); --dp-green-brand: var(--dp5-green); --dp-green-hover: var(--dp5-green-hover); --dp-green-text: var(--dp5-green); --dp-ink: var(--dp5-ink); --dp-ink-deep: var(--dp5-canvas); --dp-slate: var(--dp5-text-3); --dp-paper: var(--dp5-surface); --dp-white: var(--dp5-text); --dp-border: var(--dp5-line); --dp-field-border: var(--dp5-line); --dp-field-hover: var(--dp5-line-strong); --dp-good-wash: var(--dp5-good-tint); --dp-good-wash-t: var(--dp5-good-tint); --dp-warn-wash: var(--dp5-warn-tint); --dp-warn-wash-t: var(--dp5-warn-tint); --dp-crit-wash: var(--dp5-bad-tint); --dp-crit-wash-t: var(--dp5-bad-tint); --dp-action: var(--dp5-primary); --dp-action-ink: var(--dp5-primary-ink); --dp-action-hover: var(--dp5-primary-hover); --dp-action-t: var(--dp5-green); --dp-action-t-ink: var(--dp5-ink); --dp-action-t-hover: var(--dp5-green-hover); --dp-attention-ink: var(--dp5-ink); --dp-raised-dark: var(--dp5-raised); --dp-surface: var(--dp5-canvas); --dp-surface-raised: var(--dp5-surface); --dp-surface-sunken: var(--dp5-canvas); --dp-text: var(--dp5-text); --dp-text-muted: var(--dp5-text-2); --dp-line: var(--dp5-line); --dp-chrome: var(--dp5-canvas); --dp-chrome-green: var(--dp5-green); --dp-chrome-ink: var(--dp5-text); } }