/* ParsiVakil light theme — token overrides (site is ~90% token-driven). Applied when . Dark stays default. */ html[data-theme="light"]{ --dark:#F4F0E6; --dark-soft:#FFFFFF; --dark-elev:#FFFFFF; --dark-elev-2:#EFE8D8; --soft:#FFFFFF; --elev:#FFFFFF; --elev2:#EFE8D8; --cream:#15233C; --muted:#55607A; --muted-2:#6B7488; --gold-light:#8A6820; --gold2:#8A6820; --gold-deep:#7a5c1c; --gold:#C6952F; --grad:linear-gradient(135deg,#D4A84B,#E7C877); --sky:#2f6da8; --border:rgba(198,149,47,.30); --border-soft:rgba(20,35,60,.12); --bd:rgba(198,149,47,.30); --bds:rgba(20,35,60,.12); color-scheme: light; } html[data-theme="light"] .card, html[data-theme="light"] .usecase, html[data-theme="light"] .related-card, html[data-theme="light"] .showcase-visual, html[data-theme="light"] .inline-cta{ box-shadow: 0 1px 3px rgba(20,35,60,.08), 0 1px 2px rgba(20,35,60,.06); } html[data-theme="light"] .nav-bar{ border-bottom:1px solid rgba(20,35,60,.08); } /* ---- light-mode overrides for hardcoded-dark backgrounds ---- */ html[data-theme="light"] .nav{ background:rgba(247,244,236,.92) !important; border-bottom:1px solid rgba(20,35,60,.08); } html[data-theme="light"] .chat-form{ background:rgba(20,35,60,.04) !important; } html[data-theme="light"] .section-soft{ background:linear-gradient(transparent, rgba(20,35,60,.04)) !important; } html[data-theme="light"] .stats{ background:rgba(20,35,60,.05) !important; } html[data-theme="light"] .cmp thead th{ background:rgba(20,35,60,.06) !important; } html[data-theme="light"] .sticky-bar{ background:rgba(247,244,236,.95) !important; border-top:1px solid rgba(20,35,60,.08); } html[data-theme="light"] .footer{ background:rgba(20,35,60,.03) !important; border-top:1px solid rgba(20,35,60,.08); } html[data-theme="light"] .faq-item, html[data-theme="light"] .pv-crumb{ background:transparent !important; } /* interactive tool cards (on-page calculator + AI widget) stay dark on purpose, with a soft shadow so they float above the light page */ html[data-theme="light"] [data-pvc] > div, html[data-theme="light"] .pvw{ box-shadow:0 10px 34px rgba(20,35,60,.20) !important; } /* ===== floating theme toggle — gold so it is clearly visible in BOTH modes ===== */ .pv-theme-toggle{ position:fixed; left:18px; bottom:18px; z-index:9999; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#D4A84B,#EFC976); color:#0A1628; border:none; box-shadow:0 6px 22px rgba(212,168,75,.5), 0 2px 8px rgba(0,0,0,.32); cursor:pointer; font-family:inherit; transition:transform .15s ease, box-shadow .2s; } .pv-theme-toggle:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 10px 28px rgba(212,168,75,.6); } .pv-theme-toggle svg{ width:24px; height:24px; } /* on mobile, lift above the install sticky-bar */ @media (max-width:640px){ .pv-theme-toggle{ width:48px;height:48px;left:14px;bottom:80px; } }