/* peak-theme.css — v20260717a Peak Operator LIGHT MODE layer + global alpha-overlay tokens. ───────────────────────────────────────────────────────────── HOW THIS WORKS - Served once from the kpi webroot; every page links it LAST as /peak-theme.css (deal pages use the absolute path too — does not affect root-absolute URLs). - Dark theme is untouched: the :root block below only INTRODUCES new tokens whose dark values are byte-identical to the literals they replaced in page CSS. - A tiny inline boot snippet in each page stamps from localStorage('po_theme') BEFORE first paint. No attribute → dark, always. - Every light rule is guarded by html[data-theme="light"] so an unmigrated page simply stays dark. data-po-app scopes the few token names whose SEMANTICS differ per surface (--border is gold-tinted on deals, neutral elsewhere). - V1 decision: the top nav, chief FAB and agent sidebar keep their institutional navy in light mode (deliberate two-tone look; also they inject their own styles). */ /* ============================================================ 1. NEW GLOBAL TOKENS — dark defaults (identical to swept literals) ============================================================ */ :root { /* white-alpha overlays (dark: white veil; light: ink veil) */ --wa-02: rgba(255,255,255,0.02); --wa-025: rgba(255,255,255,0.025); --wa-03: rgba(255,255,255,0.03); --wa-035: rgba(255,255,255,0.035); --wa-04: rgba(255,255,255,0.04); --wa-05: rgba(255,255,255,0.05); --wa-06: rgba(255,255,255,0.06); --wa-07: rgba(255,255,255,0.07); --wa-08: rgba(255,255,255,0.08); --wa-09: rgba(255,255,255,0.09); --wa-10: rgba(255,255,255,0.1); --wa-12: rgba(255,255,255,0.12); --wa-14: rgba(255,255,255,0.14); --wa-15: rgba(255,255,255,0.15); --wa-16: rgba(255,255,255,0.16); --wa-20: rgba(255,255,255,0.2); --wa-25: rgba(255,255,255,0.25); --wa-30: rgba(255,255,255,0.3); --wa-40: rgba(255,255,255,0.4); --wa-50: rgba(255,255,255,0.5); --wa-55: rgba(255,255,255,0.55); --wa-70: rgba(255,255,255,0.7); /* dark-theme text veils (rgba(237,242,250,α)) */ --wt-45: rgba(237,242,250,0.45); --wt-72: rgba(237,242,250,0.72); --na-40: rgba(13,27,46,0.4); --na-50: rgba(13,27,46,0.5); --na-55: rgba(13,27,46,0.55); --na-60: rgba(13,27,46,0.6); --ga-14: rgba(201,168,76,0.14); /* gold-alpha veils (rgba(201,168,76,α)) */ --ga-03: rgba(201,168,76,0.03); --ga-04: rgba(201,168,76,0.04); --ga-05: rgba(201,168,76,0.05); --ga-06: rgba(201,168,76,0.06); --ga-07: rgba(201,168,76,0.07); --ga-08: rgba(201,168,76,0.08); --ga-10: rgba(201,168,76,0.1); --ga-12: rgba(201,168,76,0.12); --ga-15: rgba(201,168,76,0.15); --ga-18: rgba(201,168,76,0.18); --ga-20: rgba(201,168,76,0.2); --ga-22: rgba(201,168,76,0.22); --ga-25: rgba(201,168,76,0.25); --ga-30: rgba(201,168,76,0.3); --ga-35: rgba(201,168,76,0.35); --ga-40: rgba(201,168,76,0.4); --ga-45: rgba(201,168,76,0.45); --ga-50: rgba(201,168,76,0.5); --ga-60: rgba(201,168,76,0.6); /* named colors that flip meaning between themes */ --gold-fill: #C9A84C; /* CTA fill gold — stays rich in BOTH themes */ --gold-text: #E8C96A; /* bright gold text on dark → deep gold on light */ --gold-pale: #F5E6C5; /* palest gold text on dark → darkest gold on light */ --text-bright: #FFFFFF; /* "white text" → ink in light mode */ --scrim-40: rgba(0,0,0,0.4); --scrim-60: rgba(0,0,0,0.6); } /* ============================================================ 2. LIGHT THEME — token overrides Warm parchment surfaces · deep-gold accent · ink text ============================================================ */ html[data-theme="light"] { color-scheme: light; /* ---- global alpha veils flip to ink ---- */ --wa-02: rgba(19,26,42,0.03); --wa-025: rgba(19,26,42,0.035); --wa-03: rgba(19,26,42,0.04); --wa-035: rgba(19,26,42,0.045); --wa-04: rgba(19,26,42,0.05); --wa-05: rgba(19,26,42,0.06); --wa-06: rgba(19,26,42,0.08); --wa-07: rgba(19,26,42,0.09); --wa-08: rgba(19,26,42,0.10); --wa-09: rgba(19,26,42,0.11); --wa-10: rgba(19,26,42,0.12); --wa-12: rgba(19,26,42,0.14); --wa-14: rgba(19,26,42,0.16); --wa-15: rgba(19,26,42,0.17); --wa-16: rgba(19,26,42,0.18); --wa-20: rgba(19,26,42,0.22); --wa-25: rgba(19,26,42,0.28); --wa-30: rgba(19,26,42,0.35); --wa-40: rgba(19,26,42,0.42); --wa-50: rgba(19,26,42,0.5); --wa-55: rgba(19,26,42,0.55); --wa-70: rgba(19,26,42,0.7); --wt-45: rgba(19,26,42,0.55); --wt-72: rgba(19,26,42,0.78); --na-40: rgba(250,248,241,0.4); --na-50: rgba(250,248,241,0.5); --na-55: rgba(250,248,241,0.55); --na-60: rgba(250,248,241,0.6); --ga-14: rgba(154,122,36,0.18); --ga-03: rgba(154,122,36,0.05); --ga-04: rgba(154,122,36,0.06); --ga-05: rgba(154,122,36,0.08); --ga-06: rgba(154,122,36,0.09); --ga-07: rgba(154,122,36,0.10); --ga-08: rgba(154,122,36,0.12); --ga-10: rgba(154,122,36,0.14); --ga-12: rgba(154,122,36,0.16); --ga-15: rgba(154,122,36,0.20); --ga-18: rgba(154,122,36,0.24); --ga-20: rgba(154,122,36,0.26); --ga-22: rgba(154,122,36,0.28); --ga-25: rgba(154,122,36,0.32); --ga-30: rgba(154,122,36,0.38); --ga-35: rgba(154,122,36,0.44); --ga-40: rgba(154,122,36,0.50); --ga-45: rgba(154,122,36,0.55); --ga-50: rgba(154,122,36,0.60); --ga-60: rgba(154,122,36,0.70); --gold-fill: #C9A84C; --gold-text: #8A6C1D; --gold-pale: #785D18; --text-bright: #131A2A; --scrim-40: rgba(15,18,28,0.35); --scrim-60: rgba(15,18,28,0.5); /* ---- shared design tokens (deals/peak-operator-shared.css) ---- */ --bg-primary: #F2EFE7; --bg-elev0: #ECE8DC; --bg-elev1: #FAF8F1; --bg-elev2: #FFFFFF; --bg-elev3: #EFEADC; --bg-elev4: #E5DECB; --text-primary: #131A2A; --text-secondary: #3F4D66; --text-tertiary: #5F6D86; --text-muted: #939EB1; --text-on-gold: #131A2A; --border-hover: rgba(154,122,36,0.5); --border-subtle: rgba(19,26,42,0.10); --success: #116B36; --warning: #A16207; --danger: #C0262D; --info: #1D4ED8; --accent: #8A6C1D; --accent-soft: rgba(154,122,36,0.14); --accent-strong: #7E621B; --gold: #8A6C1D; --gold-hover: #AE8C2E; --category-purple: #6D28D9; --category-blue: #1D4ED8; --tint-purple: rgba(109,40,217,0.10); --tint-purple-border: rgba(109,40,217,0.32); --tint-blue: rgba(29,78,216,0.10); --tint-blue-border: rgba(29,78,216,0.32); --tint-success: rgba(23,138,70,0.12); --tint-success-border: rgba(23,138,70,0.35); --tint-warning: rgba(161,98,7,0.12); --tint-warning-border: rgba(161,98,7,0.35); --tint-gold: rgba(154,122,36,0.10); --tint-gold-border: rgba(154,122,36,0.32); --shadow-sm: 0 1px 3px rgba(23,28,40,0.10); --shadow-md: 0 4px 12px rgba(23,28,40,0.12); --shadow-lg: 0 8px 24px rgba(23,28,40,0.16); /* ---- legacy aliases (both peak-operator-overrides.css, kpi app.css) ---- */ --navy: #F2EFE7; --navy2: #FAF8F1; --navy3: #EFEADC; --navy4: #E5DECB; --gold2: #8A6C1D; --gold3: #785D18; --muted: #5F6D86; --muted2: #46536B; --white: #131A2A; --red: #C0262D; --green: #157F42; --orange: #C2570C; --blue: #1D4ED8; --yellow: #A16207; --amber: #A16207; --dim: #5F6D86; --line: rgba(19,26,42,0.12); --text: #131A2A; --text2: #3F4D66; --faint: #8A94A6; /* ---- deal_v2.html family ---- */ --bg: #F2EFE7; --card: #FAF8F1; --card-mid: #FFFFFF; --navy-mid: #EFEADC; --border-faint: rgba(19,26,42,0.10); --gold-dim: rgba(154,122,36,0.5); --gold-glow: rgba(154,122,36,0.10); /* ---- kpi cp-* / sw-* / img* mirrors ---- */ --cp-navy: #F2EFE7; --cp-navy2: #FAF8F1; --cp-navy3: #EFEADC; --cp-gold: #8A6C1D; --cp-gold2: #8A6C1D; --cp-gold3: #785D18; --cp-white: #131A2A; --cp-muted: #5F6D86; --cp-muted2: #46536B; --cp-red: #C0262D; --cp-green: #157F42; --cp-orange: #C2570C; --cp-blue: #1F6899; --sw-navy: #F2EFE7; --sw-navy2: #FAF8F1; --sw-navy3: #EFEADC; --sw-navy4: #E5DECB; --sw-gold: #8A6C1D; --sw-gold2: #8A6C1D; --sw-gold3: #785D18; --sw-white: #131A2A; --sw-muted: #5F6D86; --sw-muted2: #46536B; --sw-green: #157F42; --sw-orange: #C2570C; --sw-purple: #6D28D9; --img-success: #157F42; --img-warn: #C2570C; --img-danger: #C0262D; --img-cool: #1F6899; --img-cream: #785D18; --img-purple: #6D28D9; --imgp-gold: #8A6C1D; --imgp-amber: #A16207; --imgp-orange: #C2570C; --imgp-sky: #0369A1; --imgp-indigo: #4338CA; --imgp-purple: #6D28D9; --imgp-teal: #0F766E; --imgp-emerald: #0E8A5F; --imgp-rose: #BE123C; --text-secondary: #3F4D66; /* also covers kpi app.css rgba(255,255,255,0.85) definition */ /* ---- goals-module.css family ---- */ --bg-deepest: #F2EFE7; --bg-deep: #ECE8DC; --bg-surface: #FAF8F1; --bg-raised: #FFFFFF; --bg-muted: #EFEADC; --gold-light: #AE8C2E; --gold-dark: #7E621B; --text-body: rgba(19,26,42,0.78); --border-light: rgba(19,26,42,0.07); --input-border: rgba(19,26,42,0.16); --green-bg: rgba(23,138,70,0.12); --amber-bg: rgba(161,98,7,0.12); --red-bg: rgba(192,38,45,0.10); --blue-bg: rgba(3,105,161,0.10); --violet: #6D28D9; --violet-bg: rgba(109,40,217,0.10); --pink: #BE185D; --pink-bg: rgba(190,24,93,0.10); --cyan: #0E7490; --sky: #0369A1; --sky-bg: rgba(3,105,161,0.08); --emerald: #0E8A5F; /* ---- ops-shell.css family ---- */ --navy-2: #ECE8DC; --navy-3: #F2EFE7; --gold-2: #7E621B; --muted-2: #5F6D86; --border-2: rgba(19,26,42,0.16); --panel: rgba(19,26,42,0.04); /* ops --card (white veil) is covered by the solid --card above — reads correctly on light */ /* ---- chat page family ---- */ --navy-elev1: #FAF8F1; --navy-elev2: #FFFFFF; --gold-soft: rgba(154,122,36,0.12); --border-input: rgba(19,26,42,0.14); --user-bubble-bg: rgba(154,122,36,0.10); --user-bubble-bd: rgba(154,122,36,0.25); --agent-bubble-bg: rgba(19,26,42,0.04); --agent-bubble-bd: rgba(19,26,42,0.10); /* ---- misc singles ---- */ --clickable: #1D4ED8; --kpi: #8A6C1D; } /* Surface-scoped overrides — names whose semantics differ per app family. Deals keeps its gold-tinted hairlines; IR/KPI hairlines are neutral ink. */ html[data-theme="light"][data-po-app="deals"] { --border: rgba(154,122,36,0.30); } html[data-theme="light"][data-po-app="ir"], html[data-theme="light"][data-po-app="kpi"] { --border: rgba(19,26,42,0.12); } /* ============================================================ 3. LIGHT THEME — component patches Small, enumerated fixes where token flips alone are wrong. ============================================================ */ /* ── GOLD FILLS SITE-WIDE ───────────────────────────────────────────── --gold/--accent flip to deep TEXT-gold in light mode; anything using them as a FILL must be pinned back to the rich brand gold + ink text. Generated from a full scan of background:var(--gold…) rules (2026-07-17). Gradient-TEXT elements (.org-title-text, .poa-brand-title, .pca-empty-monogram) are deliberately excluded — their flip to deep gold is correct for text. */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .hero-open-btn, html[data-theme="light"] .run-uw-btn.enabled, html[data-theme="light"] .run-uw-btn, html[data-theme="light"] .split-primary, html[data-theme="light"] .stage-b-dot, html[data-theme="light"] .stage-b-fill, html[data-theme="light"] .hd-status-dot.loading, html[data-theme="light"] .add-doc-buttons .btn-upload, html[data-theme="light"] .hero-start-uw, html[data-theme="light"] .btn-rc-primary, html[data-theme="light"] .rr-toggle-btn.active, html[data-theme="light"] .uw-next-btn, html[data-theme="light"] .scenario-card.active::after, html[data-theme="light"] .offer-custom-submit, html[data-theme="light"] .decision-btn-primary, html[data-theme="light"] .li-modal-send-btn, html[data-theme="light"] .t12-override-dot, html[data-theme="light"] .email-btn-send, html[data-theme="light"] .va-timeline-bar, html[data-theme="light"] .va-modal-btn-save, html[data-theme="light"] .va-modal-year-bar, html[data-theme="light"] .wf-gp-segment, html[data-theme="light"] .po-gate-btn, html[data-theme="light"] .po-nav-link.active::after, html[data-theme="light"] .po-hamburger span, html[data-theme="light"] .poa-typing span, html[data-theme="light"] .poa-thinking-dot, html[data-theme="light"] .poa-send-btn, html[data-theme="light"] .ca-btn--approve, html[data-theme="light"] .ca-queue-count, html[data-theme="light"] .pc-loading-fill, html[data-theme="light"] .pc-btn-approve, html[data-theme="light"] .btn-gold, html[data-theme="light"] .view-btn.active, html[data-theme="light"] .modal-btn-gold, html[data-theme="light"] .im-mode-btn.active, html[data-theme="light"] .btn.primary, html[data-theme="light"] .mode-btn.active, html[data-theme="light"] .unread-badge, html[data-theme="light"] .composer-send, html[data-theme="light"] .new-convo-btn, html[data-theme="light"] .composer-mode-btn.active, html[data-theme="light"] .ctx-btn.solid, html[data-theme="light"] .task-assignee-avatar, html[data-theme="light"] .toolbar-btn.active, html[data-theme="light"] .login-btn, html[data-theme="light"] .hamburger-btn span, html[data-theme="light"] .org-dept-line, html[data-theme="light"] .org-ceo-badge, html[data-theme="light"] .pp-toast-success, html[data-theme="light"] .cp-form .btn-primary, html[data-theme="light"] .cp-buy-box-edit:hover, html[data-theme="light"] .cp-buy-box-configure-btn:hover, html[data-theme="light"] .imgp-bulletcard li::before, html[data-theme="light"] .imgp-ct-script-channel, html[data-theme="light"] .wiz-progress-dot--active, html[data-theme="light"] .wiz-btn-primary, html[data-theme="light"] .wiz-realism-btn--primary, html[data-theme="light"] .imgp-cc-launch-btn, html[data-theme="light"] .cg-mini-btn.btn-primary, html[data-theme="light"] .cg-chip-dot, html[data-theme="light"] .driver-circle.filled, html[data-theme="light"] .driver-punch-btn, html[data-theme="light"] .question-option.selected .question-radio, html[data-theme="light"] .progress-bar-fill.gold, html[data-theme="light"] .sidebar-logo-icon, html[data-theme="light"] .dd-day.done, html[data-theme="light"] .dd-log-btn, html[data-theme="light"] .gh-progress-fill-short, html[data-theme="light"] .dd-dot--done, html[data-theme="light"] .dd-punch-filled, html[data-theme="light"] .gh-progress-fill, html[data-theme="light"] .op-logo-mark, html[data-theme="light"] .op-user-avatar, html[data-theme="light"] .op-btn-primary, html[data-theme="light"] .op-dash-goal-fill, html[data-theme="light"] .pca-thinking-dot, html[data-theme="light"] .pca-route-pill.is-active, html[data-theme="light"] .admin-user-avatar, html[data-theme="light"] .ops-ribbon, html[data-theme="light"] .auth-badge, html[data-theme="light"] .sb-tl.p .sb-tld { background: #C9A84C; color: #131A2A; } /* gradient fills → rich gold gradient */ html[data-theme="light"] .peak-agent-fab, html[data-theme="light"] .poa-empty-hero, html[data-theme="light"] .sw-prog>span, html[data-theme="light"] .sw-finish, html[data-theme="light"] .sw-gen, html[data-theme="light"] .sw-fsave, html[data-theme="light"] .sw-begin, html[data-theme="light"] .target-bar-fill, html[data-theme="light"] .gold-divider, html[data-theme="light"] .po-gate-divider, html[data-theme="light"] .org-avatar, html[data-theme="light"] .cp-generate-btn, html[data-theme="light"] .cp-lock-btn, html[data-theme="light"] .cp-section-generate-btn, html[data-theme="light"] .cp-regenerate-btn:hover:not(:disabled), html[data-theme="light"] .cp-bf-action-primary, html[data-theme="light"] #imgp-progress, html[data-theme="light"] .imgp-trackrecord-stat::before, html[data-theme="light"] .imgp-principal-initials, html[data-theme="light"] .imgp-msg-pillar::before, html[data-theme="light"] .imgp-rail-progress-bar, html[data-theme="light"] .imgp-transformation-arrow, html[data-theme="light"] .pca-new-btn, html[data-theme="light"] .pca-send-btn, html[data-theme="light"] .btn.gold, html[data-theme="light"] .stagefill, html[data-theme="light"] .kard__prog span { background: linear-gradient(135deg, #C9A84C, #D4B469); color: #131A2A; } /* hover states → deeper rich gold */ html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .hero-open-btn:hover, html[data-theme="light"] .run-uw-btn:hover, html[data-theme="light"] .split-primary:hover, html[data-theme="light"] .hero-start-uw:hover, html[data-theme="light"] .btn-rc-primary:hover:not(:disabled), html[data-theme="light"] .uw-next-btn:hover, html[data-theme="light"] .offer-custom-submit:hover, html[data-theme="light"] .decision-btn-primary:hover, html[data-theme="light"] .email-btn-send:hover, html[data-theme="light"] .va-modal-btn-save:hover, html[data-theme="light"] .po-gate-btn:hover, html[data-theme="light"] .poa-send-btn:hover:not(:disabled), html[data-theme="light"] .ca-btn--approve:hover:not(:disabled), html[data-theme="light"] .btn-gold:hover, html[data-theme="light"] .modal-btn-gold:hover, html[data-theme="light"] .btn.primary:hover, html[data-theme="light"] .composer-send:hover, html[data-theme="light"] .new-convo-btn:hover, html[data-theme="light"] .ctx-btn.solid:hover, html[data-theme="light"] .login-btn:hover, html[data-theme="light"] .cp-form .btn-primary:hover:not(:disabled), html[data-theme="light"] .wiz-btn-primary:hover, html[data-theme="light"] .wiz-realism-btn--primary:hover, html[data-theme="light"] .imgp-cc-launch-btn:hover, html[data-theme="light"] .cg-mini-btn.btn-primary:hover, html[data-theme="light"] .driver-punch-btn:hover, html[data-theme="light"] .btn-primary:active { background: #B8962E; color: #131A2A; } /* originals carry !important — match it */ html[data-theme="light"] button.bg-yellow-600, html[data-theme="light"] button.bg-yellow-500, html[data-theme="light"] .section-jump-btn.wizard-active { background: #C9A84C !important; color: #131A2A !important; } html[data-theme="light"] button.bg-yellow-600:hover, html[data-theme="light"] button.bg-yellow-500:hover { background: #B8962E !important; } /* Scrollbars (WebKit) — pages style these dark inline in a few places */ html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(19,26,42,0.05); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(19,26,42,0.22); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(19,26,42,0.32); } /* Native form controls follow the light scheme */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color-scheme: light; } /* Nav-JS-injected tenant brand text (subheader) — nav rewrites it with inline white; the nav bar itself stays dark but this copy sits on the light subheader */ html[data-theme="light"] .po-tenant-logo { color: #131A2A !important; } /* Deal-room photo hero keeps its dark scrim in both themes → its text stays light. (Photo + dark overlay is theme-neutral; only the page below flips.) */ html[data-theme="light"] .hero-image .hero-name, html[data-theme="light"] .hero-image .hero-text, html[data-theme="light"] .hero-image .hero-address, html[data-theme="light"] .hero-image .hero-stat-value { color: #EDF2FA !important; } html[data-theme="light"] .hero-image .hero-stat-label, html[data-theme="light"] .hero-image .hero-deal-id-label, html[data-theme="light"] .hero-image .hero-deal-id-val { color: #94A3B8 !important; } html[data-theme="light"] .hero-image .hero-stat-chip { background: rgba(10,16,28,0.55); border-color: rgba(201,168,76,0.3); } /* "Dark islands" — components that deliberately keep their dark look inside light pages. Re-pinning the dark token values on the subtree makes every descendant resolve as if the theme never flipped. Add new islands here as found. */ html[data-theme="light"] .sw-chiefcol { --sw-navy: #07101F; --sw-navy2: #0D1B2E; --sw-navy3: #142338; --sw-navy4: #1B2D45; --sw-white: #EDF2FA; --sw-muted: #5A7094; --sw-muted2: #8AA0BC; --sw-gold: #C9A84C; --sw-gold2: #E8C96A; --sw-gold3: #F5E6C5; --text-bright: #FFFFFF; --po-text1: #EDF2FA; --po-text2: #94A3B8; --po-text3: #5A7094; --po-purple1: #A78BFA; --wa-05: rgba(255,255,255,0.05); --wa-06: rgba(255,255,255,0.06); --wa-07: rgba(255,255,255,0.07); --wa-08: rgba(255,255,255,0.08); --wa-10: rgba(255,255,255,0.1); --ga-10: rgba(201,168,76,0.1); --ga-30: rgba(201,168,76,0.3); } /* Deal-room photo hero is a dark island end-to-end: re-pin flipped tokens so its overlaid buttons (Re-generate, Download Report, Start UW) keep white-on-photo styling */ html[data-theme="light"] .hero-image { --text-bright: #FFFFFF; --wa-08: rgba(255,255,255,0.08); --wa-10: rgba(255,255,255,0.1); --wa-12: rgba(255,255,255,0.12); --wa-20: rgba(255,255,255,0.2); --po-text1: #EDF2FA; --po-text2: #94A3B8; --po-gold: #C9A84C; --po-gold-ink: #C9A84C; --text-on-gold: #0A0E1A; } /* Inbox SMS-readiness banner (no number / A2P) — pale-gold text on amber tint is invisible on light; use deep amber ink */ html[data-theme="light"] .sms-banner { background: rgba(161,98,7,0.10); border-bottom-color: rgba(161,98,7,0.35); } html[data-theme="light"] .sms-banner .sb-text { color: #6B4A06; } html[data-theme="light"] .sms-banner .sb-text strong, html[data-theme="light"] .sms-banner a { color: #8A6C1D; } /* Pipeline kanban column headers — dark strips flip to light stage tints; the token-driven text/border colors already resolve to deep inks in light mode */ html[data-theme="light"] .stage-deep-uw { background: rgba(154,122,36,0.16); } html[data-theme="light"] .stage-decision { background: rgba(161,98,7,0.13); } html[data-theme="light"] .stage-pending-loi { background: rgba(29,78,216,0.10); } html[data-theme="light"] .stage-loi-submitted { background: rgba(3,105,161,0.10); } html[data-theme="light"] .stage-loi-accepted { background: rgba(14,116,144,0.11); } html[data-theme="light"] .stage-due-diligence { background: rgba(126,34,206,0.10); } html[data-theme="light"] .stage-closed { background: rgba(21,128,61,0.12); } html[data-theme="light"] .stage-dead-pass { background: rgba(90,104,128,0.12); } /* Login view logo — the Peak Multifamily mark is near-white artwork; use the dark Peak Operator mark on light surfaces */ html[data-theme="light"] img[src*="peak-multifamily-logo"] { content: url('/assets/peak-operator-logo-dark.png'); } /* Pipeline deal-card stat chips — deepen status inks for light tints */ html[data-theme="light"] .dc-stat-green { color: #0F6B33; background: rgba(23,138,70,0.12); border-color: rgba(23,138,70,0.45); } html[data-theme="light"] .dc-stat-red { color: #A31B21; background: rgba(192,38,45,0.10); border-color: rgba(192,38,45,0.42); } html[data-theme="light"] .dc-stat-gray { color: #5A6880; background: rgba(90,104,128,0.08); border-color: rgba(90,104,128,0.30); } /* Brand logo — the white wordmark disappears on light surfaces; swap to the gold variant wherever the white asset is referenced (nav is dark navy: gold reads fine there too) */ html[data-theme="light"] img[src*="peak-operator-logo-white"] { content: url('/peak-operator-logo-gold.webp'); } /* deal_v2 sticky returns dashboard — bg is literal #161616; keep its dark cockpit look */ html[data-theme="light"] .returns-dashboard { --wa-03: rgba(255,255,255,0.03); --wa-05: rgba(255,255,255,0.05); --wa-06: rgba(255,255,255,0.06); --wa-08: rgba(255,255,255,0.08); --wa-10: rgba(255,255,255,0.1); --wa-12: rgba(255,255,255,0.12); --wa-20: rgba(255,255,255,0.2); --wa-25: rgba(255,255,255,0.25); --wa-30: rgba(255,255,255,0.3); --wa-55: rgba(255,255,255,0.55); --po-green7: #52C976; --po-gold-brt2: #E6B94A; --po-red6: #E05C5C; --muted: #94A3B8; --faint: #4A5568; --text-bright: #FFFFFF; } /* Tailwind CDN text utilities (deals/IR pages) — dark-theme inks flip to light-theme inks */ html[data-theme="light"] .text-white { color: #131A2A; } html[data-theme="light"] .text-slate-200 { color: #1B2436; } html[data-theme="light"] .text-slate-300 { color: #33415C; } html[data-theme="light"] .text-slate-400 { color: #46536B; } html[data-theme="light"] .text-slate-500 { color: #5A6880; } html[data-theme="light"] .text-blue-300 { color: #1F6899; } html[data-theme="light"] .text-yellow-300 { color: #A16207; } html[data-theme="light"] .text-yellow-400 { color: #A16207; } html[data-theme="light"] .text-green-400 { color: #15803D; } html[data-theme="light"] .hover\:text-white:hover { color: #131A2A; } /* ── generated sweep tokens (dark defaults = swept literals) ── */ :root { --po-ink-on-fill: #07101F; --po-navy-page: #07101F; --po-navy-inset: #0A1524; --po-ink-on-fill2: #0D1B2E; --po-navy-card: #0D1B2E; --po-navy-card2: #0F2035; --po-navy-mid0: #142338; --po-navy-mid: #162840; --po-navy-hi0: #1E3550; --po-navy-hi: #1E3554; --po-navy-hi1: #1B2D45; --po-navy-inset2: #0A1626; --po-navy-slate: #2A3346; --po-text1: #EDF2FA; --po-text12: #E2E8F0; --po-text11: #ECF0F4; --po-text10: #F8FAFC; --po-text15: #CBD5E1; --po-text2: #94A3B8; --po-text25: #8AA0BC; --po-text35: #64748B; --po-text3: #5A7094; --po-text37: #475569; --po-text38: #4A5568; --po-text4: #3D5063; --po-text39: #3D5A7A; --po-text13: #E8EEF7; --po-text26: #9FB0C3; --po-text36: #6B7D92; --text-bright: #FFFFFF; --po-gold-ink: #C9A84C; --po-gold: #C9A84C; --po-gold-hov: #D4B469; --po-gold-deep: #B8962E; --po-gold-brt: #E8C96A; --po-gold-pale: #F5E6C5; --po-gold-deep2: #9C7D2E; --po-green1: #22C55E; --po-green2: #27AE60; --po-green3: #4ADE80; --po-green4: #34D399; --po-green5: #6BCF9E; --po-green6: #86EFAC; --po-red1: #EF4444; --po-red2: #F87171; --po-red3: #E63946; --po-red4: #FCA5A5; --po-red5: #FF5252; --po-red6: #E05C5C; --po-amber1: #F59E0B; --po-amber2: #FBBF24; --po-amber3: #FFC658; --po-orange1: #E67E22; --po-orange2: #F97316; --po-blue1: #3B82F6; --po-blue2: #93C5FD; --po-blue3: #38BDF8; --po-blue4: #60A5FA; --po-blue5: #2980B9; --po-blue6: #5BA3CB; --po-cyan1: #22D3EE; --po-green7: #52C976; --po-gold-brt2: #E6B94A; --po-gold-brt3: #E8C97A; --po-yellow-pale: #FDE047; --po-orange-pale: #FDBA74; --po-purple2: #C084FC; --po-steel: #7E96B5; --po-teal1: #2DD4BF; --po-indigo1: #818CF8; --po-purple1: #A78BFA; } html[data-theme="light"] { --po-ink-on-fill: #131A2A; --po-navy-page: #F2EFE7; --po-navy-inset: #ECE8DC; --po-ink-on-fill2: #1B2436; --po-navy-card: #FAF8F1; --po-navy-card2: #FFFFFF; --po-navy-mid0: #EFEADC; --po-navy-mid: #EFEADC; --po-navy-hi0: #E5DECB; --po-navy-hi: #E5DECB; --po-navy-hi1: #E5DECB; --po-navy-inset2: #ECE8DC; --po-navy-slate: #E0DACA; --po-text1: #131A2A; --po-text12: #1B2436; --po-text11: #161E2F; --po-text10: #0F1522; --po-text15: #33415C; --po-text2: #3F4D66; --po-text25: #46536B; --po-text35: #5A6880; --po-text3: #5F6D86; --po-text37: #5A6880; --po-text38: #8A94A6; --po-text4: #939EB1; --po-text39: #67758C; --po-text13: #131A2A; --po-text26: #4D5B74; --po-text36: #5F6D86; --text-bright: #131A2A; --po-gold-ink: #8A6C1D; --po-gold: #C9A84C; --po-gold-hov: #AE8C2E; --po-gold-deep: #7E621B; --po-gold-brt: #8A6C1D; --po-gold-pale: #785D18; --po-gold-deep2: #7E621B; --po-green1: #116B36; --po-green2: #157F42; --po-green3: #15803D; --po-green4: #0E8A5F; --po-green5: #15803D; --po-green6: #116B36; --po-red1: #C0262D; --po-red2: #C4262E; --po-red3: #C0262D; --po-red4: #B91C1C; --po-red5: #C0262D; --po-red6: #B04044; --po-amber1: #A16207; --po-amber2: #A16207; --po-amber3: #8F6A10; --po-orange1: #C2570C; --po-orange2: #C2570C; --po-blue1: #1D4ED8; --po-blue2: #2563EB; --po-blue3: #0369A1; --po-blue4: #1D4ED8; --po-blue5: #1F6899; --po-blue6: #1F6899; --po-cyan1: #0E7490; --po-green7: #15803D; --po-gold-brt2: #8A6C1D; --po-gold-brt3: #8A6C1D; --po-yellow-pale: #A16207; --po-orange-pale: #C2570C; --po-purple2: #7E22CE; --po-steel: #5A6880; --po-teal1: #0F766E; --po-indigo1: #4338CA; --po-purple1: #6D28D9; }