/* ══════════════════════════════════════════════════════════════════════════ shared/report-theme.css — sitewide color tokens (design system) + dark mode. :root defines the light-mode value of every token; :root[data-theme="dark"] overrides them for dark mode. is set by shared/report-theme.js (before first paint, to avoid a flash of the wrong theme) and flipped by the toggle injected by shared/report-theme-toggle.js. Every stylesheet on the site references these via var(--token-name, ) — the second argument is always the color that rule used to hardcode, so linking this file for the first time changes nothing until data-theme="dark" is actually set. NAMING: roles, not colors — a token describes what a color is FOR (page background, primary text, a border) so dark mode only means changing the value here, not touching every rule that uses it. A handful of near-duplicate literals found across the 25 per-report stylesheets (e.g. #E3ECF7 vs #EEF4FB, both "light blue tint fill") were deliberately consolidated onto one token rather than kept as separate one-off tokens — this centralizes the palette per the instruction to tokenize "as much as possible," and the visual difference between the merged literals was imperceptible. Tokens already shipped in Phase 1 (index.css, shared/report-notes.css, shared/report-bugreport.css, shared/report-pdf-export.css, shared/report-env-banner.css) keep their original light-mode values unchanged. ══ ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ── */ --bg-page: #F0F4F8; /* page/body background */ --bg-surface: #FFFFFF; /* cards, modals, panels, inputs */ --bg-surface-alt: #F9FAFB; /* subtle fill (disabled inputs, chip backgrounds, zebra rows) */ --bg-subtle: #F3F4F6; /* hover backgrounds, secondary buttons */ --bg-panel-tint: #F0F0F5; /* soft lavender-gray panel fill */ --bg-surface-translucent: rgba(255,255,255,.92); /* semi-see-through surface (index.css card-bookmark-btn resting state) */ --brand-blue-tint: #E3ECF7; /* light blue fill (icon chips, hover backgrounds, table zebra) */ --brand-blue-tint-strong: #A8C5E8; /* more saturated light-blue fill (chart bands, stronger hover) */ /* ── Text ── */ --text-primary: #333333; /* default body/heading text */ --text-primary-alt: #1F2430; /* shared/report-bugreport.css's own body text shade */ --text-secondary: #666666; /* secondary copy, captions */ --text-tertiary: #374151; /* form labels, secondary emphasis */ --text-muted: #9CA3AF; /* placeholders, muted counts, disabled icons */ --text-faint: #6B7280; /* a slightly darker muted tone */ --text-strong: #111827; /* near-black emphasis text (table totals, strong labels) */ --text-on-brand: #FFFFFF; /* text/icons sitting on a brand-blue button or fill */ --link-blue: #1D4ED8; /* generic link/info text distinct from brand blue */ /* ── Borders / dividers ── */ --border: #D1D5DB; /* default border, section dividers */ --border-subtle: #E5E7EB; /* lighter input/card borders */ --border-faint: #EEEEEE; /* lightest divider (modal header/footer rules) */ /* ── Brand ── */ --brand-blue: #3A7BC8; /* primary accent, links, active states */ --brand-blue-dark: #0B5394; /* headings, hover-darken state, table headers */ /* ── Status ── */ --status-error: #DC2626; /* error text/icons */ --status-success: #059669; /* success text/icons */ --status-success-tint: #E6F4EC; /* light green fill (success icon chips, rows) */ --status-warning: #F59E0B; /* warning text/icons */ /* ── Alert / callout boxes (bg + text pairs used across ops & ads reports) ── */ --alert-error-bg: #FEE2E2; --alert-error-text: #991B1B; --alert-warning-bg: #FEF3C7; --alert-warning-text: #92400E; --alert-info-bg: #DBEAFE; --alert-info-icon: #3B82F6; /* ── Badges / tags ── */ --badge-warning-bg: #FFF4E5; /* "In Progress" badge fill */ --badge-warning-bg-alt: #FDF3E0; /* ad-platform note tag fill (distinct literal, same family) */ --badge-warning-text: #B45309; /* text for both warning badges above */ --tag-blue-bg: #EAF1FA; /* client-note tag fill */ /* ── Report-specific accents (Sales Assistant / Admin Tracker / DM Scorecard) ── */ --accent-purple: #5B3ECC; --accent-purple-tint: #EDE9FE; --accent-purple-tint-strong: #EAE3FF; /* image-widget / stronger purple hover fill */ --accent-teal: #2EC4B6; --accent-teal-tint: #E8FAF8; /* teal pill/badge fill (client tags, department pills) */ --pill-pink-bg: #FCE7F3; /* campaign-objective category pill (e.g. LinkedIn "Job applicants") */ --pill-rose-bg: #FFE4E6; /* campaign-objective category pill (e.g. LinkedIn "Video views") */ --pill-indigo-bg: #E0E7FF; /* status pill category fill (e.g. Admin Tracker "Startup") */ --pill-cyan-bg: #CFFAFE; /* status pill category fill (e.g. Admin Tracker "<1yr") */ --accent-navy: #0D0D1A; /* already a deep near-black — used as an intentionally-dark card/section */ --accent-lavender-bg: #F5F5FA; --brand-blue-tint-subtle: #F7FAFD; /* very light blue tint (hover rows, popovers) */ /* ── Environment banners ── */ --banner-testing-bg: #B3261E; /* testing.* deployment banner */ --banner-local-bg: #FCEEDA; /* localhost banner fill */ --banner-local-text: #A15C00; /* localhost banner text */ } :root[data-theme="dark"] { /* 2026-08-06: tells the browser its OWN native UI chrome (the popup list a 's CLOSED box correctly via var(--bg-surface)/var(--text-primary) above, but that open popup is drawn by the browser itself, not by our CSS — without this, it stayed light-chrome regardless of data-theme, so hovering an