/* Foreground color for content sitting on top of var(--accent) (primary buttons, accent badges, etc). Always near-black: every industry's accent is a saturated mid-tone (orange / aqua / gold) that needs dark text for AA contrast. Independent of light/dark theme. */ :root { --on-accent: #0d0c0a; } /* Light-mode token overrides. Dark is the default and lives in each page's :root block. */ :root[data-theme="light"] { --bg: #f4f4f5; --bg-panel: #ffffff; --bg-stamp: #e7e7ea; --ink: #18181b; --ink-strong: #09090b; --ink-dim: #52525b; --ink-faint: #8a8a92; --rule: #d4d4d8; --map-nodata: #d4d4d8; } /* Dark default; defined here so pages that don't yet declare --ink-strong still resolve it. */ :root[data-theme="dark"], :root:not([data-theme]) { --ink-strong: #ffffff; } /* Soften the body noise overlay in light mode so it doesn't read as grime. */ :root[data-theme="light"] body::before { opacity: 0.025; mix-blend-mode: multiply; } /* Modal scrims are too heavy on a light page. */ :root[data-theme="light"] .contact-overlay, :root[data-theme="light"] .confirm-overlay { background: rgba(20, 18, 14, 0.45); } :root[data-theme="light"] .export-modal { background: rgba(20, 18, 14, 0.35); } /* --------------------------------------------------------------------------- Per-vertical accent palette. Source: design/tokens.md. data-industry is set by the dashboard boot code from the cities catalog (cityCfg.industry), which is the single source of truth for which //.json the page is rendering. Profile.industry is NOT used: it can drift from city_slug and can't represent multi-entitlement customers. Admin debug-switcher reloads the page, so this resolves on the next boot for free. Two-token contract: - `--accent` is the dark-bg primary (bright, vibrant on the #0d0c0a body). Used everywhere by default, including marketing pages which are dark-only. - `--accent-on-light` is the AA-on-white darkened variant, used ONLY in the dashboard's light-mode block (light surfaces need 4.5:1 text contrast). The light-mode override below remaps `--accent` to `--accent-on-light` so existing `var(--accent)` references resolve correctly without edits. --------------------------------------------------------------------------- */ :root[data-industry="hvac"] { --accent: #ff6b1a; --accent-soft: #ffb380; --accent-deep: #cc4d00; --accent-on-light: #ea580c; --accent-deep-on-light: #9a3412; } :root[data-industry="pools"] { --accent: #22d3ee; --accent-soft: #67e8f9; --accent-deep: #0e7490; --accent-on-light: #0891b2; --accent-deep-on-light: #155e75; } :root[data-industry="solar"] { --accent: #fbbf24; --accent-soft: #fde68a; --accent-deep: #92400e; --accent-on-light: #b45309; --accent-deep-on-light: #78350f; } /* Light-mode-only: remap accent tokens to the AA-on-white variants so dashboard text/links/borders sitting on white pass 4.5:1 contrast. Marketing pages never opt into [data-theme="light"], so their bright accent is preserved on dark heroes. */ :root[data-theme="light"][data-industry="hvac"], :root[data-theme="light"][data-industry="pools"], :root[data-theme="light"][data-industry="solar"] { --accent: var(--accent-on-light); --accent-deep: var(--accent-deep-on-light); } /* Top-zips horizontal bar: dark mode uses an accent gradient for depth; light mode reads cleaner as a solid accent fill (per Jeff). */ :root[data-theme="light"] .zip-row .zip-bar-fill { background: var(--accent); } /* --------------------------------------------------------------------------- Brand wordmark, vertical-aware. The visible text on every dashboard topbar + footer is rendered via ::after keyed on data-industry, NOT hardcoded in HTML and NOT rewritten by JS. Same first-paint primitive as the per-vertical accent: theme.js sets data-industry on synchronously in from localStorage cache, so the correct wordmark resolves before first paint and a returning pools/solar user never sees an "HVAC Intelligence Inbox" flash. See dad516a for the accent-flash precedent this mirrors. HTML contract: keep `.brand-link` text node EMPTY. The wordmark is content. Pre-auth pages that should always read as the umbrella (login, plan early load, forgot, reset) set [data-brand-mode="umbrella"] on , which forces "Intelligence Inbox" regardless of any cached data-industry. --------------------------------------------------------------------------- */ .brand-link::after { content: "Intelligence Inbox"; } :root[data-industry="hvac"] .brand-link::after { content: "HVAC Intelligence Inbox"; } :root[data-industry="pools"] .brand-link::after { content: "Pool Intelligence Inbox"; } :root[data-industry="solar"] .brand-link::after { content: "Solar Intelligence Inbox"; } :root[data-brand-mode="umbrella"] .brand-link::after { content: "Intelligence Inbox"; }