/* optimal-dark-mode.css * Rev 1 (AR1 build pack, 2026-05-26) * McKinsey-at-night theme layer for Optimal Trend. * * Activated by [data-theme="dark"] on . Inherits every selector * from optimal-design-system.css, optimal-density.css and * dp5_admin_pages.css through the semantic-token rebase. This file * declares the dark resolution of the semantic tokens plus the small * set of surface-specific recolours that cannot ride tokens alone * (topbar utilities, modal scrim, capture-list active state, chart * border lift). * * Brand anchors preserved: Optimal navy #002F65, navy-dark #001E44, * teal #00A8CB. Operator pages are sans throughout; Georgia is * retained in chrome and the index reading-layer hero only. Footer * strapline unchanged. * * No new primitives. No gradient. No shadow theatre. * * Director decisions baked in (Leslie 2026-05-26): * - Canvas V1a navy-dark (#001E44). * - Operator-zone typography V2c sans throughout. * - Selection V3a accent-soft fill + accent outline. * - Mars tab active state: solid accent fill with navy-dark * ink-on-accent. Mars-literal styling. * * Predecessor: dp6_aesthetic_refresh_codex_review_2026-05-26_rev3.md. */ [data-theme="dark"] { --canvas: var(--navy-dark); --surface: #062A57; --surface-alt: rgba(255,255,255,0.04); --surface-elevated: #0A3970; --surface-inset: rgba(0,0,0,0.18); --surface-strip: #001120; --ink-primary: #F2EFE9; --ink-secondary: #B7C0CE; --ink-tertiary: #7B8694; --ink-on-accent: var(--navy-dark); --accent-soft: rgba(0,168,203,0.18); --accent-strong: #33C0DF; --rule-c: rgba(255,255,255,0.16); --rule-soft: rgba(255,255,255,0.08); --rule-strip: rgba(0,168,203,0.22); --focus-ring: #5BD0EA; --shadow-card: 0 0 0 1px rgba(255,255,255,0.04); --shadow-modal: 0 14px 40px rgba(0,0,0,0.55); } /* ============================================================ * Topbar * In light mode the topbar reads as navy against paper canvas. In * dark mode the canvas IS navy-dark; lift the topbar one step so it * stays visually distinct without losing the brand navy. * ============================================================ */ [data-theme="dark"] .ot-shell__topbar { background: var(--navy); } [data-theme="dark"] .ot-shell__nav a { border-color: rgba(255,255,255,0.22); } /* ============================================================ * Topbar utilities (live, post-clean-up structure) * .ot-shell__utilities, .ot-notif-bell, .ot-shell__signout, * .ot-notif-panel * ============================================================ */ [data-theme="dark"] .ot-shell__utilities { color: var(--ink-primary); } [data-theme="dark"] .ot-notif-bell { color: var(--ink-primary); } [data-theme="dark"] .ot-notif-bell[data-state="unread"]::after, [data-theme="dark"] .ot-notif-bell.has-unread::after { background: var(--accent); } [data-theme="dark"] .ot-shell__signout { color: var(--ink-secondary); border-color: rgba(255,255,255,0.22); } [data-theme="dark"] .ot-shell__signout:hover { background: rgba(255,255,255,0.08); color: var(--ink-primary); } [data-theme="dark"] .ot-notif-panel { background: var(--surface-elevated); color: var(--ink-primary); border-color: var(--rule-c); box-shadow: var(--shadow-modal); } [data-theme="dark"] .ot-notif-panel__item { border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-notif-panel__item:hover { background: var(--surface-alt); } /* ============================================================ * Theme toggle (compact labelled, lives inside .ot-shell__utilities) * ============================================================ */ [data-theme="dark"] .ot-theme-toggle { color: var(--ink-primary); border-color: rgba(255,255,255,0.22); } [data-theme="dark"] .ot-theme-toggle:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .ot-theme-toggle__icon { background: conic-gradient(transparent 50%, var(--accent) 50%); } /* ============================================================ * Buttons * Primary takes the brand teal on dark, with navy-dark text. * Ghost loses its paper hover and uses translucent surface lift. * ============================================================ */ [data-theme="dark"] .ot-btn--primary { background: var(--accent); color: var(--ink-on-accent); } [data-theme="dark"] .ot-btn--primary:hover { background: var(--accent-strong); } [data-theme="dark"] .ot-btn--ghost { color: var(--ink-primary); border-color: var(--rule-c); } [data-theme="dark"] .ot-btn--ghost:hover { background: var(--surface-alt); } [data-theme="dark"] .ot-btn--danger { background: transparent; color: var(--ink-primary); border-color: var(--ink-tertiary); } /* ============================================================ * Status pills * ============================================================ */ [data-theme="dark"] .ot-status-pill--no-capture { background: var(--surface-elevated); color: var(--ink-secondary); } [data-theme="dark"] .ot-status-pill--inactive { background: var(--ink-3); color: var(--ink-primary); } /* ============================================================ * Default chassis tab strip * ============================================================ */ [data-theme="dark"] .ot-tabs { background: var(--canvas); border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-tabs button { color: var(--ink-secondary); } [data-theme="dark"] .ot-tabs button.is-active { color: var(--ink-primary); background: var(--surface); border-top-color: var(--accent); } [data-theme="dark"] .ot-tabs button.is-disabled { color: var(--ink-tertiary); } [data-theme="dark"] .ot-tab-strip { border-bottom-color: var(--rule-c); } [data-theme="dark"] .ot-tab-strip__btn { color: var(--ink-secondary); } [data-theme="dark"] .ot-tab-strip__btn[aria-selected="true"] { color: var(--ink-primary); border-bottom-color: var(--accent); } /* ============================================================ * Mars tab strip (asset-workbench operator zone) * Director decision V_Mars_literal (Leslie 2026-05-26 Rev 3): * solid teal fill plus navy-dark ink-on-accent. * ============================================================ */ [data-theme="dark"] .ot-tabs--mars { background: var(--surface-strip); border-bottom-color: var(--rule-strip); } [data-theme="dark"] .ot-tabs--mars button { color: var(--ink-secondary); } [data-theme="dark"] .ot-tabs--mars button.is-active { background: var(--accent); color: var(--ink-on-accent); border-bottom-color: var(--accent); } [data-theme="dark"] .ot-tabs--mars__chev { background: var(--surface-strip); color: var(--ink-secondary); } [data-theme="dark"] .ot-tabs--mars__chev:hover { color: var(--ink-primary); } [data-theme="dark"] .ot-tabs--mars__chev[aria-disabled="true"] { color: var(--ink-tertiary); } [data-theme="dark"] .ot-workbench--mars .ot-selected-point { background: var(--surface-strip); color: var(--ink-secondary); border-bottom-color: var(--rule-strip); } [data-theme="dark"] .ot-workbench--mars .ot-selected-point__title { color: var(--ink-primary); } /* ============================================================ * Workbench centre and evidence * Charts keep --navy-dark fill. Border lifts to teal-translucent so * the panel remains distinct against the dark canvas. * ============================================================ */ [data-theme="dark"] .ot-tree-panel, [data-theme="dark"] .ot-centre-panel, [data-theme="dark"] .ot-evidence-panel { background: var(--surface); border-color: var(--rule-c); } [data-theme="dark"] .ot-tree-node button { color: var(--ink-secondary); } [data-theme="dark"] .ot-tree-node.is-selected { background: var(--accent-soft); border-left-color: var(--accent); } [data-theme="dark"] .ot-tree-node__meta { color: var(--ink-tertiary); } [data-theme="dark"] .ot-tree-menu { background: var(--surface-elevated); border-color: var(--accent); } [data-theme="dark"] .ot-tree-menu button { color: var(--ink-primary); } [data-theme="dark"] .ot-tree-menu button:hover { background: var(--navy); } [data-theme="dark"] .ot-controls label, [data-theme="dark"] .ot-channel-controls { color: var(--ink-tertiary); } [data-theme="dark"] .ot-channel-controls { border-color: var(--rule-c); } [data-theme="dark"] .ot-channel-controls legend { color: var(--ink-primary); } [data-theme="dark"] .ot-channel-controls label { color: var(--ink-secondary); } [data-theme="dark"] .ot-feed-state { background: var(--surface-strip); color: var(--ink-primary); } [data-theme="dark"] .ot-capture-list { background: var(--surface-alt); border-color: var(--rule-c); } [data-theme="dark"] .ot-capture-list button { background: var(--surface); color: var(--ink-secondary); border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-capture-list button.is-active { background: var(--accent-soft); color: var(--ink-primary); font-weight: 700; } [data-theme="dark"] .ot-chart { border-color: rgba(0,168,203,0.35); } [data-theme="dark"] .ot-chart-runtime-error { color: var(--ink-primary); background: var(--canvas); border-color: var(--accent); } [data-theme="dark"] .ot-context-band { border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-context-band p { color: var(--ink-secondary); } [data-theme="dark"] .ot-context-metrics div { background: var(--surface-inset); border-left-color: var(--accent); } [data-theme="dark"] .ot-context-metrics span { color: var(--ink-primary); } [data-theme="dark"] .ot-context-metrics small { color: var(--ink-tertiary); } /* ============================================================ * Reading-layer and chrome headings * ============================================================ */ [data-theme="dark"] .ot-shell-title, [data-theme="dark"] .ot-panel__header h2, [data-theme="dark"] .ot-context-band h2 { color: var(--ink-primary); } [data-theme="dark"] .ot-card h3 { color: var(--ink-primary); } [data-theme="dark"] .ot-page--admin > .ot-page__header h1 { color: var(--ink-primary); } [data-theme="dark"] .ot-page--admin > .ot-page__header p { color: var(--ink-secondary); } [data-theme="dark"] .ot-page--admin .ot-section__title { color: var(--ink-primary); } /* ============================================================ * KPI cards * ============================================================ */ [data-theme="dark"] .ot-page--admin .ot-kpi-card { background: var(--surface); border-color: var(--rule-c); } [data-theme="dark"] .ot-page--admin .ot-kpi-card__label { color: var(--ink-tertiary); } [data-theme="dark"] .ot-page--admin .ot-kpi-card__value { color: var(--ink-primary); } [data-theme="dark"] .ot-page--admin .ot-kpi-card__detail { color: var(--ink-tertiary); } /* ============================================================ * Cards, facts, status cards * ============================================================ */ [data-theme="dark"] .ot-card { border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-fact { border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-fact span:first-child { color: var(--ink-tertiary); } [data-theme="dark"] .ot-fact span:last-child { color: var(--ink-primary); } [data-theme="dark"] .ot-card--form > .ot-card__header { background: var(--surface); color: var(--ink-primary); border-bottom-color: var(--rule-c); } [data-theme="dark"] .ot-card--form > .ot-card__body { background: var(--surface); color: var(--ink-primary); } [data-theme="dark"] .ot-status-card { background: var(--surface); border-color: var(--rule-c); } [data-theme="dark"] .ot-status-card__title { color: var(--ink-primary); } [data-theme="dark"] .ot-status-card__row { color: var(--ink-secondary); border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-status-card__row__value { color: var(--ink-primary); } [data-theme="dark"] .ot-section--spaced { border-color: var(--rule-c); } /* ============================================================ * Forms * ============================================================ */ [data-theme="dark"] .ot-form-row > label { color: var(--ink-secondary); } [data-theme="dark"] .ot-form-row__control input[type="text"], [data-theme="dark"] .ot-form-row__control input[type="number"], [data-theme="dark"] .ot-form-row__control input[type="password"], [data-theme="dark"] .ot-form-row__control input[type="email"], [data-theme="dark"] .ot-form-row__control input[type="url"], [data-theme="dark"] .ot-form-row__control select, [data-theme="dark"] .ot-form-row__control textarea, [data-theme="dark"] .ot-search input, [data-theme="dark"] .ot-controls select, [data-theme="dark"] .ot-controls input[type="datetime-local"] { background: var(--surface); color: var(--ink-primary); border-color: var(--rule-c); } [data-theme="dark"] .ot-form-row__control input:focus, [data-theme="dark"] .ot-form-row__control select:focus, [data-theme="dark"] .ot-form-row__control textarea:focus { outline-color: var(--focus-ring); border-color: var(--focus-ring); } [data-theme="dark"] .ot-form-row__control input[disabled], [data-theme="dark"] .ot-form-row__control select[disabled], [data-theme="dark"] .ot-form-row__control textarea[disabled] { background: var(--surface-inset); color: var(--ink-tertiary); } [data-theme="dark"] .ot-form-row__control .ot-checkbox, [data-theme="dark"] .ot-form-row__control .ot-radio { color: var(--ink-primary); } [data-theme="dark"] .ot-form-actions { border-top-color: var(--rule-c); } [data-theme="dark"] .ot-form-callback[role="status"] { color: var(--ink-secondary); } /* ============================================================ * Audit table * Selection rides V3a accent-soft fill + accent outline; the outline * offset is tightened by 1 px on dark canvas for high-DPI legibility. * ============================================================ */ [data-theme="dark"] .ot-audit-table thead th { background: var(--surface-alt); color: var(--ink-secondary); border-bottom-color: var(--rule-c); } [data-theme="dark"] .ot-audit-table tbody tr:nth-child(2n) { background: var(--surface-alt); } [data-theme="dark"] .ot-audit-table tbody tr:hover { background: var(--accent-soft); } [data-theme="dark"] .ot-audit-table tbody tr[aria-selected="true"] { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -3px; } [data-theme="dark"] .ot-audit-table tbody td { border-bottom-color: var(--rule-soft); color: var(--ink-primary); } [data-theme="dark"] .ot-audit-table tbody td.ot-audit-table__cell--mono { color: var(--ink-secondary); } [data-theme="dark"] .ot-audit-table td.ot-empty-state-cell, [data-theme="dark"] .ot-audit-table tr.ot-empty-state-row td { color: var(--ink-tertiary); } /* ============================================================ * Empty state * ============================================================ */ [data-theme="dark"] .ot-empty, [data-theme="dark"] .ot-admin-only-empty { background: var(--surface); border-color: var(--rule-c); color: var(--ink-tertiary); } [data-theme="dark"] .ot-admin-only-empty__title { color: var(--ink-primary); } [data-theme="dark"] .ot-admin-only-empty__body { color: var(--ink-secondary); } /* ============================================================ * Eyebrow stays teal - brand anchor * ============================================================ */ [data-theme="dark"] .ot-eyebrow { color: var(--accent); } /* ============================================================ * Modals * Backdrop scrim is heavier on dark canvas so the panel still reads. * ============================================================ */ [data-theme="dark"] .ot-modal { background: rgba(0,0,0,0.72); } [data-theme="dark"] .ot-modal__content { background: var(--surface-elevated); border-color: var(--rule-c); color: var(--ink-primary); box-shadow: var(--shadow-modal); } [data-theme="dark"] .ot-modal__header { background: var(--navy); color: var(--ink-primary); } [data-theme="dark"] .ot-modal__actions { background: var(--surface); border-top-color: var(--rule-c); } /* ============================================================ * Misc (error banner, chips, badges, mapping field, counter bar, * upload zone) * ============================================================ */ [data-theme="dark"] .ot-error-banner { background: var(--surface-inset); border-color: var(--rule-c); color: var(--ink-primary); } [data-theme="dark"] .ot-code-chip { color: var(--ink-primary); background: var(--surface-inset); border-color: var(--rule-c); } [data-theme="dark"] .ot-type-badge { color: var(--ink-primary); background: var(--accent-soft); } [data-theme="dark"] .ot-mapping-field { background: var(--surface); border-color: var(--rule-c); } [data-theme="dark"] .ot-mapping-field__source { color: var(--ink-tertiary); } [data-theme="dark"] .ot-counter-bar { background: var(--surface-inset); } [data-theme="dark"] .ot-counter-bar__fill { background: var(--accent); } [data-theme="dark"] .ot-upload-zone { background: var(--surface-inset); border-color: var(--rule-c); color: var(--ink-secondary); } [data-theme="dark"] .ot-upload-zone:hover, [data-theme="dark"] .ot-upload-zone.is-dragover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink-primary); } [data-theme="dark"] .ot-upload-zone__title { color: var(--ink-primary); } [data-theme="dark"] .ot-upload-zone__subtitle { color: var(--ink-tertiary); } /* ============================================================ * Page-header meta strip and section helpers * ============================================================ */ [data-theme="dark"] .ot-page__header__meta { color: var(--ink-tertiary); } [data-theme="dark"] .ot-card__header--with-action { color: var(--ink-primary); } /* ============================================================ * Link rows / lists * ============================================================ */ [data-theme="dark"] .ot-link-row a, [data-theme="dark"] .ot-link-list a { color: var(--ink-primary); border-bottom-color: var(--rule-soft); } [data-theme="dark"] .ot-link-row a:hover, [data-theme="dark"] .ot-link-list a:hover { color: var(--accent); } /* ============================================================ * Footer * Reads on the canvas, not on the white that light mode uses. * ============================================================ */ [data-theme="dark"] .ot-footer { background: var(--canvas); color: var(--ink-tertiary); border-top-color: var(--rule-soft); } /* ============================================================ * AR1.2 softer night palette * Lifts the dark theme from near-black to a readable navy working * surface while retaining Optimal brand contrast. * ============================================================ */ [data-theme="dark"] { --canvas: #0B315C; --surface: #123F6F; --surface-alt: rgba(255,255,255,0.075); --surface-elevated: #174C7E; --surface-inset: rgba(255,255,255,0.035); --surface-strip: #08294F; --ink-primary: #F7F4EE; --ink-secondary: #D1DAE6; --ink-tertiary: #A6B2C0; --ink-on-accent: #001E44; --accent: #00A8CB; --accent-soft: rgba(0,168,203,0.20); --accent-strong: #4BC8E3; --rule-c: rgba(220,226,235,0.26); --rule-soft: rgba(220,226,235,0.15); --focus-ring: #77D9EC; } [data-theme="dark"] body { background: var(--canvas); color: var(--ink-primary); } [data-theme="dark"] .ot-shell__topbar { background: #002F65; border-bottom-color: rgba(255,255,255,0.16); } [data-theme="dark"] .ot-shell__nav a { border-color: rgba(255,255,255,0.22); } [data-theme="dark"] .ot-shell__nav a:hover, [data-theme="dark"] .ot-shell__nav a[aria-current="page"] { background: var(--accent); color: var(--ink-on-accent); } [data-theme="dark"] .ot-page__header, [data-theme="dark"] .ot-card, [data-theme="dark"] .ot-card--form, [data-theme="dark"] .ot-tab-panel, [data-theme="dark"] .ot-gallery-panel, [data-theme="dark"] .ot-centre-panel, [data-theme="dark"] .ot-evidence-panel { background: var(--surface); color: var(--ink-primary); border-color: var(--rule-soft); } [data-theme="dark"] .ot-tree-panel, [data-theme="dark"] .ot-gallery-stack, [data-theme="dark"] .ot-maint__stack, [data-theme="dark"] .ot-diagnostic-graphs__stack { background: var(--canvas); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #F8FAFC; color: #0D1117; border-color: rgba(255,255,255,0.28); } [data-theme="dark"] .ot-audit-table th, [data-theme="dark"] table th { background: rgba(255,255,255,0.08); color: var(--ink-primary); } [data-theme="dark"] .ot-audit-table td, [data-theme="dark"] table td { border-color: var(--rule-soft); color: var(--ink-secondary); } [data-theme="dark"] .ot-chart, [data-theme="dark"] .ot-diagnostic-graphs__chart, [data-theme="dark"] .ot-gallery-card { background: #FDFDFB; color: #0D1117; border-color: rgba(0,47,101,0.28); } /* End of optimal-dark-mode.css */