/* * Piveth — site-wide theme layer (dark default + light overrides). * * Dark is the original design and is left untouched. When * is set, this file remaps the shared CSS variables (landing / about / legal / rhaov / * finos) and the Tailwind utility classes used across the app, auth, onboarding, and * dashboard surfaces. Loaded LAST in every so its overrides win. */ :root { color-scheme: dark; } /* ------------------------------------------------------------------ */ /* Light theme tokens */ /* ------------------------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; /* Neutral surfaces (warm paper) */ --pv-bg: #FAF7EF; --pv-bg-base: #F4EFE3; --pv-bg-raised: #FFFFFF; --pv-bg-card: #FFFFFF; --pv-bg-hover: #F0E9D9; --pv-bg-warm: #F6F0E2; /* Text */ --pv-text: #211E17; --pv-text-soft: #3A362D; --pv-text-muted: #6E675A; /* Gold that stays legible on light backgrounds */ --pv-gold-text: #8A6726; --pv-gold-link: #9A7209; --pv-border: rgba(138, 103, 38, 0.24); --pv-border-soft: rgba(138, 103, 38, 0.16); /* Landing / about / legal shared vars */ --bg-deep: #FAF7EF; --bg-base: #F4EFE3; --bg-raised: #FFFFFF; --bg-warm: #F6F0E2; --text-soft: #211E17; --text-muted: #6E675A; --border-gold: rgba(138, 103, 38, 0.24); --card-bg: rgba(20, 16, 8, 0.035); --glass: rgba(20, 16, 8, 0.05); /* Finos landing section */ --finos-bg: #F4EFE3; /* Rhaov admin */ --rhaov-bg: #F4EFE3; --rhaov-surface: #FFFFFF; --rhaov-raised: #FBF8F1; --rhaov-card: #FFFFFF; --rhaov-border: rgba(138, 103, 38, 0.2); --rhaov-text: #211E17; --rhaov-muted: #6E675A; } /* ------------------------------------------------------------------ */ /* Page backgrounds (var-driven pages) */ /* ------------------------------------------------------------------ */ html[data-theme="light"] body.landing-page, html[data-theme="light"] .about-page, html[data-theme="light"] .legal-page { background: var(--bg-deep) !important; color: var(--text-soft) !important; } html[data-theme="light"] .about-page { background: var(--bg-deep) !important; } /* Onboarding cosmic scene → calm light backdrop */ html[data-theme="light"] body.ob-body, html[data-theme="light"] .ob-body { background: radial-gradient(ellipse at 50% -10%, #FFFDF7, #F1EAD9 70%) !important; color: var(--pv-text) !important; } /* Legal typography */ html[data-theme="light"] .legal-doc-title { color: var(--text-soft) !important; } html[data-theme="light"] .legal-doc-meta, html[data-theme="light"] .legal-doc p, html[data-theme="light"] .legal-doc li { color: var(--text-muted) !important; } html[data-theme="light"] .legal-doc h2, html[data-theme="light"] .legal-doc h3 { color: var(--text-soft) !important; } /* ------------------------------------------------------------------ */ /* Tailwind utility overrides (app / auth / settings / dashboard) */ /* ------------------------------------------------------------------ */ /* Body base */ html[data-theme="light"] body.bg-piveth-deep, html[data-theme="light"] body.bg-piveth-base { background-color: var(--pv-bg) !important; color: var(--pv-text) !important; } /* Backgrounds */ html[data-theme="light"] .bg-piveth-deep { background-color: var(--pv-bg) !important; } html[data-theme="light"] .bg-piveth-base { background-color: var(--pv-bg-base) !important; } html[data-theme="light"] .bg-piveth-raised { background-color: var(--pv-bg-raised) !important; } html[data-theme="light"] .bg-piveth-card { background-color: var(--pv-bg-card) !important; } html[data-theme="light"] .bg-piveth-hover { background-color: var(--pv-bg-hover) !important; } html[data-theme="light"] .bg-piveth-warm { background-color: var(--pv-bg-warm) !important; } /* Translucent surface variants (bg-piveth-*/NN, bg-black/NN) */ html[data-theme="light"] [class*="bg-piveth-deep/"], html[data-theme="light"] [class*="bg-piveth-base/"] { background-color: rgba(250, 247, 239, 0.9) !important; } html[data-theme="light"] [class*="bg-piveth-raised/"], html[data-theme="light"] [class*="bg-piveth-card/"] { background-color: rgba(255, 255, 255, 0.92) !important; } html[data-theme="light"] [class*="bg-black/"] { background-color: rgba(20, 16, 8, 0.06) !important; } /* White overlays flip to subtle dark tints so they stay visible */ html[data-theme="light"] [class*="bg-white/"] { background-color: rgba(20, 16, 8, 0.04) !important; } /* Text neutrals */ html[data-theme="light"] .text-white, html[data-theme="light"] .text-stone-50, html[data-theme="light"] .text-stone-100, html[data-theme="light"] .text-stone-200, html[data-theme="light"] .text-soft { color: var(--pv-text) !important; } html[data-theme="light"] .text-stone-300 { color: var(--pv-text-soft) !important; } html[data-theme="light"] .text-stone-400, html[data-theme="light"] .text-stone-500, html[data-theme="light"] .text-stone-600, html[data-theme="light"] .text-muted { color: var(--pv-text-muted) !important; } /* Gold text that would be invisible on light → legible bronze */ html[data-theme="light"] .text-gold-50, html[data-theme="light"] .text-gold-100, html[data-theme="light"] .text-gold-200, html[data-theme="light"] .text-gold-light { color: var(--pv-gold-text) !important; } html[data-theme="light"] .text-gold-300 { color: var(--pv-gold-link) !important; } /* Borders — bump faint gold borders to a visible warm edge */ html[data-theme="light"] [class*="border-gold-"] { border-color: var(--pv-border) !important; } html[data-theme="light"] .border-stone-700, html[data-theme="light"] .border-stone-800, html[data-theme="light"] [class*="border-white/"] { border-color: var(--pv-border-soft) !important; } /* Dividers */ html[data-theme="light"] .divide-gold-400\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--pv-border-soft) !important; } /* Placeholder + inputs */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--pv-text); } html[data-theme="light"] ::placeholder { color: var(--pv-text-muted) !important; opacity: 0.8; } /* Gold gradient buttons keep their look; ensure dark text on them stays dark */ html[data-theme="light"] .text-piveth-deep { color: #221E12 !important; } /* Arbitrary hex backgrounds baked into some auth pages */ html[data-theme="light"] .bg-\[\#0E0C08\] { background-color: var(--pv-bg) !important; } /* Shadows softer on light */ html[data-theme="light"] .shadow-black\/20, html[data-theme="light"] .shadow-black\/30, html[data-theme="light"] .shadow-xl { box-shadow: 0 12px 32px rgba(20, 16, 8, 0.1) !important; } /* ------------------------------------------------------------------ */ /* Cockpit widgets (dashboard) — dark hexes baked in dashboard.html */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .cockpit-widget { background: var(--pv-bg-card) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .cockpit-widget-title { color: var(--pv-text) !important; } html[data-theme="light"] .cockpit-kpi-value { color: #8A6726 !important; } html[data-theme="light"] .cockpit-kpi-sub, html[data-theme="light"] .cockpit-widget-empty, html[data-theme="light"] .cockpit-widget-loading { color: var(--pv-text-muted) !important; } html[data-theme="light"] .cockpit-table th { color: var(--pv-text-muted) !important; } html[data-theme="light"] .cockpit-table td { color: var(--pv-text-soft) !important; border-top-color: var(--pv-border-soft) !important; } html[data-theme="light"] #cockpitToolbar { background: var(--pv-bg-raised) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .cockpit-toolbar-btn { color: var(--pv-text-soft) !important; } html[data-theme="light"] .cockpit-alert-text { color: var(--pv-text-soft) !important; } /* ------------------------------------------------------------------ */ /* Settings toggles + nav */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .settings-nav-item { color: var(--pv-text-muted) !important; } html[data-theme="light"] .settings-nav-item:hover { background: var(--pv-bg-hover) !important; color: var(--pv-text) !important; } html[data-theme="light"] .settings-toggle { background: #E7DFCB !important; } /* ------------------------------------------------------------------ */ /* Floating theme toggle button (injected by theme.js) */ /* ------------------------------------------------------------------ */ .pv-theme-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 2147483000; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; border-radius: 9999px; border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(20, 16, 8, 0.72); color: #F4D27A; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .pv-theme-toggle:hover { transform: translateY(-1px); } .pv-theme-toggle svg { width: 1.1rem; height: 1.1rem; display: block; } .pv-theme-toggle .pv-theme-label { display: none; } @media (min-width: 640px) { .pv-theme-toggle .pv-theme-label { display: inline; } } html[data-theme="light"] .pv-theme-toggle { border-color: rgba(138, 103, 38, 0.35); background: rgba(255, 255, 255, 0.9); color: #8A6726; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.12); } .pv-theme-toggle .pv-icon-sun { display: none; } html[data-theme="light"] .pv-theme-toggle .pv-icon-sun { display: block; } html[data-theme="light"] .pv-theme-toggle .pv-icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { .pv-theme-toggle { transition: none; } }