/* ============================================================ theme.css — LIGHT THEME for the Advisor Hub (employee pages) ============================================================ Purely additive. It defines NOTHING for dark mode: every dark value stays exactly where it already lives (:root in styles.css, and the duplicated :root in crm.css / admin.css). This file only supplies the light-mode values, so removing this file returns the site to dark with zero other edits. HOW IT WINS WITHOUT LOAD-ORDER GAMES `:root[data-theme="light"]` scores (0,2,0) on specificity; the bare `:root` blocks in the other stylesheets score (0,1,0). The light block therefore beats them regardless of which comes first. Do NOT "fix" this by reordering stylesheets or adding !important. SCOPE — employee portal pages only (Dan, 2026-08-17). Public marketing pages (index, about, news, brands, events, inquire, pricing) never load this file and stay dark permanently, so what a customer sees is unchanged. The attribute is set pre-paint by the inline snippet in each employee page's (see theme-boot in nav-auth.js for the shared source of that snippet). TWO TOKEN SETS, because the codebase has two: · --color-* → the site design system (styles.css), used by the shared header/nav and anything built on the public design system · --bg-N / --text* / --accent* → the employee app set, defined identically in crm.css and admin.css Both are redefined here so a page loading either (or both) themes fully. WHAT DELIBERATELY DOES NOT FLIP Status colors keep their meaning in both themes — red is still error, green still success. They are only darkened here, because a hue tuned for legibility on #0a0a0f fails WCAG contrast on white. Chart series, generated PDFs (finance-report-pdf.js) and all email HTML are excluded entirely: email clients don't support CSS custom properties, and a PDF is a fixed document, not a themed surface. ============================================================ */ :root[data-theme="light"] { /* ── Site design-system tokens (styles.css) ───────────────────────── */ /* Surfaces. The dark ramp runs darkest→lightest (#0a0a0f → #16161f); inverted, the page is the tinted end and cards are pure white, so a card still reads as "raised" the way it does in dark. */ --color-bg-primary: #eef1f5; --color-bg-secondary: #f7f9fb; --color-bg-card: #ffffff; --color-bg-glass: rgba(255, 255, 255, 0.82); --color-bg-glass-border: rgba(44, 106, 135, 0.16); /* Steel blue, same logo hue, darkened for contrast on white. #6ea0b8 on white is 2.2:1 — fails AA for text. #2c6a87 is 5.6:1. Note --color-accent-bright is DARKER than --color-accent here: in dark "bright" means more prominent against the background, and against white that direction reverses. */ --color-accent: #2c6a87; --color-accent-light: #3d84a5; --color-accent-bright: #1f5570; --color-accent-dim: #5a8ba3; --color-accent-glow: rgba(44, 106, 135, 0.12); /* Text */ --color-text-primary: #14171c; --color-text-secondary: #4a5460; --color-text-muted: #697180; --color-text-accent: #2c6a87; /* Borders — white-alpha becomes black-alpha, slightly stronger because a hairline needs more weight to read on a light surface. */ --color-border: rgba(16, 24, 32, 0.12); --color-border-hover: rgba(44, 106, 135, 0.38); /* ── Employee app tokens (crm.css / admin.css) ────────────────────── */ --bg-0: #eef1f5; /* page */ --bg-1: #f7f9fb; /* subtle panel */ --bg-2: #ffffff; /* cards, modals, table rows */ --bg-3: #e4e9ef; /* hover / raised. In dark this is the LIGHTEST step; on white "raised" has to go darker, so the ramp intentionally stops being monotonic here. */ --border: rgba(16, 24, 32, 0.12); --border-hover: rgba(44, 106, 135, 0.38); --text: #14171c; --text-dim: #4a5460; --text-muted: #697180; --accent: #2c6a87; --accent-light: #3d84a5; --accent-bright: #1f5570; /* Status — hue preserved, luminance dropped to clear AA on white. (dark → light: #e06d6d → #c0392b, #7fc492 → #1e7a45, #e4b15e → #96650f) */ --danger: #c0392b; --success: #1e7a45; --warning: #96650f; --danger-strong: #b32d1f; --success-bright: #12703c; --warning-alt: #8a5c0d; --shadow: 0 10px 30px rgba(20, 30, 45, 0.12); } /* ============================================================ SHARED TOKENS — defined for BOTH themes ============================================================ These are new tokens introduced for theming. They must carry a dark value too, because nothing else in the codebase defines them. Kept here rather than in styles.css so the whole theming layer is one file. ============================================================ */ :root { /* The employee app set, repeated here at its EXISTING dark values. crm.css and admin.css already define these, but advisor.html (and any future page) loads styles.css + nav.css only — without this block the tokens would be undefined there and every var() would fall back to its literal, silently pinning that page to dark. Values are identical to crm.css, so on pages that load both this is a no-op regardless of which stylesheet lands last. */ --bg-0: #0a0a0f; --bg-1: #111118; --bg-2: #16161f; --bg-3: #1d1d28; --border: rgba(255,255,255,0.08); --border-hover: rgba(110,160,184,0.3); --text: #f0f2f5; --text-dim: #a0a8b4; --text-muted: #6b7280; --accent: #6ea0b8; --accent-light: #8fbdd4; --accent-bright: #a3d5e8; --danger: #e06d6d; --success: #7fc492; --warning: #e4b15e; --shadow: 0 10px 40px rgba(0,0,0,0.5); /* Status variants the codebase uses alongside the three above — a second, more saturated red for destructive emphasis, a vivid green for "live" indicators, and a second amber for inline warnings. They existed only as repeated literals; naming them is what lets them darken on light. */ --danger-strong: #e05252; --success-bright: #1ddb75; --warning-alt: #e0aa52; /* Text drawn ON TOP of an accent-filled surface (primary buttons, badges). Dark theme paints a pale blue button with near-black text; light theme paints a deep blue button, which needs white text. This is the token behind the ~46 hardcoded #0a1720 occurrences. */ --on-accent: #0a1720; /* Text on a filled status chip (danger/success/warning backgrounds). White in both themes — those chips stay saturated either way. */ --on-status: #ffffff; /* ── RGB TRIPLES ────────────────────────────────────────────────────── The codebase tints these three colours at dozens of different alphas (rgba(110,160,184,.08) … .5, and white/black washes at every step). Naming each alpha would mean ~40 tokens; naming the TRIPLE means one token covers every alpha, present and future: border: 1px solid rgba(var(--accent-rgb), 0.3); Fallbacks are written inline at each call site — rgba(var(--accent-rgb, 110,160,184), .3) — so a browser without the token still gets today's exact colour. A var() fallback may contain commas, which is what makes this legal. */ --accent-rgb: 110, 160, 184; /* steel blue, the tint behind hovers/glows */ --overlay-rgb: 255, 255, 255; /* light-on-dark washes; inverts to dark-on-light */ --shadow-rgb: 0, 0, 0; /* drop shadows and modal scrims */ /* Neutral overlays, expressed as tokens so they can invert. --overlay-* = a wash laid over a surface (hover states, zebra rows) --scrim = the dimmer behind a modal */ --overlay-weak: rgba(255, 255, 255, 0.04); --overlay-soft: rgba(255, 255, 255, 0.06); --overlay-medium: rgba(255, 255, 255, 0.10); --overlay-strong: rgba(255, 255, 255, 0.14); --scrim: rgba(0, 0, 0, 0.50); --scrim-heavy: rgba(0, 0, 0, 0.70); } :root[data-theme="light"] { --on-accent: #ffffff; --on-status: #ffffff; /* Same three triples, inverted. --overlay-rgb flipping white→near-black is what turns every hover wash, zebra stripe and hairline the right way round in one move. Shadows go blue-grey rather than pure black, which is what stops a light UI looking like it has soot under every card. */ --accent-rgb: 44, 106, 135; --overlay-rgb: 16, 24, 32; --shadow-rgb: 20, 30, 45; --overlay-weak: rgba(16, 24, 32, 0.03); --overlay-soft: rgba(16, 24, 32, 0.05); --overlay-medium: rgba(16, 24, 32, 0.08); --overlay-strong: rgba(16, 24, 32, 0.12); --scrim: rgba(20, 30, 45, 0.38); --scrim-heavy: rgba(20, 30, 45, 0.55); } /* ============================================================ The top bar stays DARK in light theme (Dan, 2026-08-19) ============================================================ `.site-header` has no light value and is not getting one. Its background in nav.css is `var(--color-header-bg, rgba(10,10,15,0.85))` and `--color-header-bg` is defined NOWHERE, so the literal fallback always wins: dark site chrome above a light page, which is the look Dan asked for. The bug that made this block necessary: light theme flips the text tokens to near-black, so the nav rendered #4a5460 links on that near-black bar — about 1.3:1, effectively unreadable. Anything drawn ON the bar needs on-dark values. TWO EXCEPTIONS, carved back out below. The Advisor Hub dropdown and the mobile nav drawer are LIGHT panels that merely live inside the header, so they must NOT inherit the white ink or they turn white-on-white. Both are children of .site-header, so the order here matters: bar first, panels after. ============================================================ */ :root[data-theme="light"] .site-header { --color-text-primary: #ffffff; --color-text-secondary: #ffffff; /* nav links — bright white, as asked */ --color-text-muted: rgba(255, 255, 255, 0.70); --text: #ffffff; /* the mobile hamburger bars */ --accent-rgb: 110, 160, 184; /* hover underline, back on dark */ } /* --color-accent is deliberately NOT reverted: it fills the Sign In / Sign Out pill, and deep blue with near-white text reads correctly on the dark bar, whereas the dark theme's pale blue would not. Only the two places that use the accent as INK on the bar are redirected, to the dark theme's bright accent — which stays legible here and keeps the "you are here" cue from dissolving into the white of every other link. */ :root[data-theme="light"] .site-header .nav-link[aria-current="page"] { color: #a3d5e8; } :root[data-theme="light"] .site-header .nav-link[aria-current="page"]::after { background: #a3d5e8; } /* Exception 1 — the Advisor Hub dropdown: a light panel on the dark bar. */ :root[data-theme="light"] .site-header .nav-employee-menu { --color-text-primary: #14171c; --color-text-secondary: #4a5460; --color-text-muted: #697180; --text: #14171c; --accent-rgb: 44, 106, 135; } /* Exception 2 — below 900px the links move OUT of the bar into a slide-in drawer backed by --color-bg-secondary (#f7f9fb in light). White ink there would be invisible. The bar itself still holds the logo and hamburger, so it keeps the white set above. */ @media (max-width: 900px) { :root[data-theme="light"] .site-header .main-nav { --color-text-primary: #14171c; --color-text-secondary: #4a5460; --color-text-muted: #697180; --accent-rgb: 44, 106, 135; } /* In the drawer the active link is on a light surface again, so it goes back to the readable deep accent rather than the on-dark bright one. */ :root[data-theme="light"] .site-header .main-nav .nav-link[aria-current="page"] { color: #2c6a87; } :root[data-theme="light"] .site-header .main-nav .nav-link[aria-current="page"]::after { background: #2c6a87; } } /* ============================================================ Assets that assume a dark backdrop ============================================================ */ /* The logo mark is drawn for a dark background. Rather than ship a second asset, damp its glow on light: the artwork itself reads fine, it was the halo that looked wrong. */ :root[data-theme="light"] .logo-img, :root[data-theme="light"] .nav-logo img { filter: none; } /* Browser-rendered UI (scrollbars, form controls, date pickers) follows this, so native widgets stop rendering dark inside a light page. */ :root[data-theme="light"] { color-scheme: light; } :root { color-scheme: dark; } /* Theme transition. Applied only after first paint (the boot snippet adds .theme-ready on DOMContentLoaded) so switching themes animates but the initial load does not fade in from the wrong colors. */ .theme-ready body, .theme-ready .crm-card, .theme-ready .card { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* ── Generated: pale status shades ───────────────────────────────────────── AUTO-GENERATED by the theming migration — do not hand-edit values here. Each token holds a status hue EXACTLY as dark mode has always drawn it, so dark is unchanged, and pairs it with a light-mode counterpart darkened in HLS (hue + saturation kept, lightness pulled to ~0.34) so the same colour clears AA as text on white. New code should prefer the semantic tokens (--danger / --success / --warning); these exist to carry 27 pre-existing shades across without flattening them. */ :root { --s4ade80: #4ade80; --s4ecb71: #4ecb71; --s5ea0e4: #5ea0e4; --s6eb882: #6eb882; --s7fb389: #7fb389; --s8fc4dc: #8fc4dc; --sb284dc: #b284dc; --sb9a3e8: #b9a3e8; --sc5a8ee: #c5a8ee; --scfe8f3: #cfe8f3; --sd4b54a: #d4b54a; --se0746e: #e0746e; --se08a52: #e08a52; --se0a03c: #e0a03c; --se0a050: #e0a050; --se0a052: #e0a052; --se0a0a0: #e0a0a0; --se0a852: #e0a852; --se0a952: #e0a952; --se0c052: #e0c052; --se94560: #e94560; --seebf6e: #eebf6e; --sf08a8a: #f08a8a; --sf0a0a0: #f0a0a0; --sf87171: #f87171; --sfbbf24: #fbbf24; --sff8c1a: #ff8c1a; } :root[data-theme="light"] { --s4ade80: #169745; --s4ecb71: #248a40; --s5ea0e4: #145699; --s6eb882: #377748; --s7fb389: #3f6f48; --s8fc4dc: #266988; --sb284dc: #59238b; --sb9a3e8: #421f8f; --sc5a8ee: #4c1896; --scfe8f3: #1f6d8f; --sd4b54a: #90761d; --se0746e: #93201a; --se08a52: #984916; --se0a03c: #9b6613; --se0a050: #985e15; --se0a052: #985d16; --se0a0a0: #862727; --se0a852: #986416; --se0a952: #986516; --se0c052: #987b16; --se94560: #a10d25; --seebf6e: #a16a0d; --sf08a8a: #9f0e0e; --sf0a0a0: #9b1313; --sf87171: #ac0202; --sfbbf24: #ad7d00; --sff8c1a: #ad5600; }