/* ============================================================================ Built Analytics — two-theme design tokens + lucide support ---------------------------------------------------------------------------- Extracted from planviewer-final.jsx (PlanViewerRedesign). Loaded AFTER styles.css so the shared-token remap below wins the cascade. Reversible: remove the to revert. Two themes, matching the site's existing mechanism: :root -> dark (default, no attribute) [data-theme="light"] -> light (data-theme="light" on ) ========================================================================== */ /* ── DARK (default) ──────────────────────────────────────────────────────── */ :root { /* New "pv" design tokens (the JSX palette) — available for new components */ --pv-canvas: #1b1f26; --pv-panel: #22272f; --pv-raised: #2b313b; --pv-hover: rgba(255, 255, 255, 0.05); --pv-border: rgba(255, 255, 255, 0.07); --pv-border-strong: rgba(255, 255, 255, 0.12); --pv-text-hi: #f1f3f6; --pv-text-mid: #9aa3b0; --pv-text-dim: #5e6874; --pv-accent: #a78bfa; --pv-accent-text: #c4b5fd; --pv-accent-tint: rgba(167, 139, 250, 0.12); --pv-accent-solid: #7c5ce8; --pv-accent-hover: #8b6ef0; --pv-scroll-thumb: rgba(255, 255, 255, 0.14); --pv-scroll-thumb-hover: rgba(255, 255, 255, 0.28); --pv-tooltip: #0f1216; --pv-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --pv-glass: rgba(43, 49, 59, 0.72); --pv-danger: #f0837c; --pv-danger-tint: rgba(240, 131, 124, 0.08); --pv-danger-border: rgba(240, 131, 124, 0.4); --pv-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --pv-fs-base: 13px; --pv-fs-sm: 11px; /* Remap the site's existing tokens onto the refined palette (the reskin) */ --bg-primary: var(--pv-canvas); /* was #000000 */ --bg-secondary: var(--pv-panel); /* was #111111 */ --text-primary: var(--pv-text-hi); /* was #ffffff */ --text-secondary: var(--pv-text-mid); /* was #9ca3af */ --text-tertiary: #d7dce3; /* was #e5e7eb */ --border-primary: rgba(255, 255, 255, 0.09); --border-secondary: var(--pv-border-strong); --surface-primary: var(--pv-hover); --surface-secondary: rgba(255, 255, 255, 0.09); --accent-primary: var(--pv-accent); /* was #8b5cf6 */ --accent-hover: var(--pv-accent-hover); /* was #7c3aed */ --shadow-primary: rgba(0, 0, 0, 0.4); --navbar-bg: rgba(27, 31, 38, 0.9); /* canvas-tinted glass */ } /* ── LIGHT ───────────────────────────────────────────────────────────────── */ [data-theme="light"] { --pv-canvas: #eef0f3; --pv-panel: #ffffff; --pv-raised: #f3f4f7; --pv-hover: rgba(15, 23, 42, 0.05); --pv-border: rgba(15, 23, 42, 0.09); --pv-border-strong: rgba(15, 23, 42, 0.16); --pv-text-hi: #1c2128; --pv-text-mid: #4d5560; --pv-text-dim: #8a93a0; --pv-accent: #7c5ce8; --pv-accent-text: #6242d6; --pv-accent-tint: rgba(124, 92, 232, 0.1); --pv-accent-solid: #7c5ce8; --pv-accent-hover: #6b4ce0; --pv-scroll-thumb: rgba(15, 23, 42, 0.18); --pv-scroll-thumb-hover: rgba(15, 23, 42, 0.34); --pv-tooltip: #1c2128; --pv-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); --pv-glass: rgba(255, 255, 255, 0.72); --pv-danger: #d1453b; --pv-danger-tint: rgba(209, 69, 59, 0.08); --pv-danger-border: rgba(209, 69, 59, 0.4); --bg-primary: var(--pv-panel); /* was #ffffff */ --bg-secondary: var(--pv-raised); /* was #f8fafc */ --text-primary: var(--pv-text-hi); /* was #1f2937 */ --text-secondary: var(--pv-text-mid); /* was #6b7280 */ --text-tertiary: #2a2f37; /* was #374151 */ --border-primary: rgba(15, 23, 42, 0.1); --border-secondary: var(--pv-border-strong); --surface-primary: var(--pv-hover); --surface-secondary: rgba(15, 23, 42, 0.09); --accent-primary: var(--pv-accent); /* was #8b5cf6 */ --accent-hover: var(--pv-accent-hover); /* was #7c3aed */ --shadow-primary: rgba(15, 23, 42, 0.14); --navbar-bg: rgba(255, 255, 255, 0.9); } /* ── Text-scale hooks (from the JSX; opt-in via data-scale on any element) ── */ [data-scale="sm"] { --pv-fs-base: 12px; --pv-fs-sm: 10px; } [data-scale="lg"] { --pv-fs-base: 15px; --pv-fs-sm: 12px; } /* ── Restyled scrollbar utility (opt-in: add class="pv-scroll") ──────────── */ .pv-scroll { scrollbar-width: thin; scrollbar-color: var(--pv-scroll-thumb) transparent; } .pv-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .pv-scroll::-webkit-scrollbar-track { background: transparent; } .pv-scroll::-webkit-scrollbar-thumb { background: var(--pv-scroll-thumb); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } .pv-scroll::-webkit-scrollbar-thumb:hover { background: var(--pv-scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box; } .pv-scroll::-webkit-scrollbar-corner { background: transparent; } /* ── lucide icons: inherit color + sensible default sizing ───────────────── */ [data-lucide] { width: 1em; height: 1em; } svg.lucide { width: 1em; height: 1em; stroke-width: 1.75; vertical-align: -0.125em; } /* Theme toggle (desktop + mobile): match the old Font Awesome sun/moon */ .theme-toggle .ba-toggle-slot, .mobile-theme-toggle .ba-toggle-slot { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color 0.3s ease; } .theme-toggle:hover .ba-toggle-slot, .mobile-theme-toggle:hover .ba-toggle-slot { color: var(--text-primary); } .theme-toggle .ba-toggle-slot svg, .mobile-theme-toggle .ba-toggle-slot svg { width: 17px; height: 17px; stroke-width: 1.9; } /* ── Animations (from the JSX) ───────────────────────────────────────────── */ @keyframes pv-slide-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes pv-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }