/* =====================================================================
   P-Soft — Light mode layer + theme toggle button.
   Loaded on every page; all theme rules are scoped to html[data-theme="light"].
   Accent gradients (blue/purple/pink) are intentionally kept in both modes.
   ===================================================================== */

/* ---------- Global scale: shrink the whole site a touch (rem-based) ---------- */
html{font-size:15.2px}

/* ---------- Declare the page's own color scheme so mobile browsers
   (Chrome/Samsung "force-dark") do NOT auto-darken & fight our toggle ---------- */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* ---------- Site logo: swap color (light bg) <-> brightened (dark bg) ---------- */
.psoft-logo{display:block;height:100%;width:100%;object-fit:contain}
.psoft-logo--light{display:none}
html[data-theme="light"] .psoft-logo--dark{display:none}
html[data-theme="light"] .psoft-logo--light{display:block}

/* ---------- Theme toggle button (present in both modes) ---------- */
.psoft-theme-toggle{
  width:2.5rem;height:2.5rem;border-radius:.75rem;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  transition:background .25s,border-color .25s,color .25s,transform .2s;
}
.psoft-theme-toggle:hover{transform:translateY(-1px);color:#fff;background:rgba(255,255,255,.1)}
.psoft-theme-toggle svg{width:1.15rem;height:1.15rem;display:block}
.psoft-theme-toggle .i-moon{display:none}
.psoft-theme-toggle .i-sun{display:block}
.psoft-mobile-toggle{width:100%;justify-content:center;gap:.6rem;margin-top:.5rem;height:2.9rem}
.psoft-mobile-toggle .lbl{font-size:.9rem;font-weight:700}
.psoft-mobile-toggle .lbl-light{display:none}
html[data-theme="light"] .psoft-mobile-toggle .lbl-dark{display:none}
html[data-theme="light"] .psoft-mobile-toggle .lbl-light{display:inline}
html[data-theme="light"] .psoft-theme-toggle .i-sun{display:none}
html[data-theme="light"] .psoft-theme-toggle .i-moon{display:block}
html[data-theme="light"] .psoft-theme-toggle{
  background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.14);color:#2b3140;
}
html[data-theme="light"] .psoft-theme-toggle:hover{background:rgba(15,23,42,.09);color:#000}

/* ============================ LIGHT MODE ============================ */
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{background:#f4f5f9 !important;color:#2f3545 !important}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#e9ebf2}

/* ---------- Header (Tailwind utility classes) ---------- */
html[data-theme="light"] .text-white{color:#191e2e !important}
html[data-theme="light"] .text-white\/30{color:rgba(25,30,46,.45) !important}
html[data-theme="light"] .text-white\/40{color:rgba(25,30,46,.5) !important}
html[data-theme="light"] .text-white\/45{color:rgba(25,30,46,.55) !important}
html[data-theme="light"] .text-white\/50{color:rgba(25,30,46,.6) !important}
html[data-theme="light"] .text-white\/60{color:rgba(25,30,46,.66) !important}
html[data-theme="light"] .text-white\/70{color:rgba(25,30,46,.72) !important}
html[data-theme="light"] .hover\:text-white:hover{color:#000 !important}
html[data-theme="light"] .glass{background:rgba(255,255,255,.72) !important;border-color:rgba(15,23,42,.08) !important}
html[data-theme="light"] .bg-white\/5{background:rgba(15,23,42,.05) !important}
html[data-theme="light"] .bg-white\/10{background:rgba(15,23,42,.08) !important}
html[data-theme="light"] .bg-white\/\[0\.02\]{background:rgba(15,23,42,.03) !important}
html[data-theme="light"] .hover\:bg-white\/5:hover{background:rgba(15,23,42,.05) !important}
html[data-theme="light"] .hover\:bg-white\/10:hover{background:rgba(15,23,42,.08) !important}
html[data-theme="light"] .border-white\/5{border-color:rgba(15,23,42,.07) !important}
html[data-theme="light"] .border-white\/10{border-color:rgba(15,23,42,.1) !important}
html[data-theme="light"] .bg-\[\#0a0a0f\]\/80{background:rgba(244,245,249,.85) !important}
html[data-theme="light"] .bg-\[\#0a0a0f\]\/95{background:rgba(255,255,255,.97) !important}
html[data-theme="light"] .bg-\[\#08080d\]{background:#edeff5 !important}  /* footer */
html[data-theme="light"] #mobile-menu{border-color:rgba(15,23,42,.1) !important}
/* products carousel + footer map (light) */
html[data-theme="light"] .psh-viewport{border-color:rgba(15,23,42,.12) !important;box-shadow:0 24px 60px -34px rgba(99,102,241,.45) !important}
html[data-theme="light"] .psh-dot{background:rgba(15,23,42,.2) !important}
html[data-theme="light"] .psh-dot.is-active{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#ec4899) !important}
html[data-theme="light"] .psoft-fmap{border-color:rgba(15,23,42,.12) !important}
html[data-theme="light"] .psoft-faddr{color:rgba(25,30,46,.62) !important}
html[data-theme="light"] .psoft-faddr svg{color:rgba(25,30,46,.4) !important}

/* ---------- Shared: headings / strong (were #fff) ---------- */
html[data-theme="light"] .psh-h1,html[data-theme="light"] .psh-h2,
html[data-theme="light"] .psh-scard h3,html[data-theme="light"] .psh-pcard h3,
html[data-theme="light"] .psh-band h3,html[data-theme="light"] .psh-prow .nm,
html[data-theme="light"] .psa-title,html[data-theme="light"] .psa-content h2,
html[data-theme="light"] .psa-content h3,html[data-theme="light"] .psa-content strong,
html[data-theme="light"] .psa-cta h3,html[data-theme="light"] .psa-rc h3,
html[data-theme="light"] .psa-rel h2,html[data-theme="light"] .psa-nav .ttl,
html[data-theme="light"] .psb-h1,html[data-theme="light"] .psb-card h2 a,
html[data-theme="light"] .psp-title,html[data-theme="light"] .psp-h2,
html[data-theme="light"] .psp-content h2,html[data-theme="light"] .psp-content h3,
html[data-theme="light"] .psp-content strong,html[data-theme="light"] .psp-band h3,
html[data-theme="light"] .psp-winname,html[data-theme="light"] .psp-relcard h4{
  color:#161a2b !important;
}

/* ---------- Shared: base body text ---------- */
html[data-theme="light"] .psa,html[data-theme="light"] .psa-content,
html[data-theme="light"] .psb,html[data-theme="light"] .psp-content{color:#373d4f !important}

/* ---------- Shared: muted / secondary text ---------- */
html[data-theme="light"] .psh-sub,html[data-theme="light"] .psh-lead,
html[data-theme="light"] .psh-about p,html[data-theme="light"] .psh-scard p,
html[data-theme="light"] .psh-pcard p,html[data-theme="light"] .psh-prow .tg,
html[data-theme="light"] .psh-chips span,html[data-theme="light"] .psh-badge,
html[data-theme="light"] .psh-hicard .v,html[data-theme="light"] .psh-field label,
html[data-theme="light"] .psh-panel-title,html[data-theme="light"] .psh-band p,
html[data-theme="light"] .psa-meta,html[data-theme="light"] .psa-back,
html[data-theme="light"] .psa-share span,html[data-theme="light"] .psa-cta p,
html[data-theme="light"] .psa-nav .lbl,html[data-theme="light"] .psa-rc time,
html[data-theme="light"] .psa-tags a,html[data-theme="light"] .psa-share a,
html[data-theme="light"] .psa-content blockquote,
html[data-theme="light"] .psb-sub,html[data-theme="light"] .psb-meta,
html[data-theme="light"] .psb-card p,html[data-theme="light"] .psb-empty,
html[data-theme="light"] .psb-pager a,html[data-theme="light"] .psb-pager span,
html[data-theme="light"] .psp-lead,html[data-theme="light"] .psp-sub,
html[data-theme="light"] .psp-hl span,html[data-theme="light"] .psp-wintag,
html[data-theme="light"] .psp-fcard p,html[data-theme="light"] .psp-band p,
html[data-theme="light"] .psp-field label,html[data-theme="light"] .psp-relcard p,
html[data-theme="light"] .psp-back{color:#525a6d !important}

/* ---------- Shared: surfaces (cards / chips / inputs / rows) ---------- */
html[data-theme="light"] .psh-hicard,html[data-theme="light"] .psh-scard,
html[data-theme="light"] .psh-pcard,html[data-theme="light"] .psh-prow,
html[data-theme="light"] .psh-chips span,html[data-theme="light"] .psh-badge,
html[data-theme="light"] .psh-form,html[data-theme="light"] .psh-btn-ghost,
html[data-theme="light"] .psa-tags a,html[data-theme="light"] .psa-share a,
html[data-theme="light"] .psa-nav a,html[data-theme="light"] .psa-rc,
html[data-theme="light"] .psb-card,html[data-theme="light"] .psb-pager a,
html[data-theme="light"] .psb-pager span,
html[data-theme="light"] .psp-fcard,html[data-theme="light"] .psp-form,
html[data-theme="light"] .psp-btn-ghost,html[data-theme="light"] .psp-winrow,
html[data-theme="light"] .psp-relcard,html[data-theme="light"] .psp-hl span{
  background:#ffffff !important;border-color:rgba(15,23,42,.09) !important;
}
html[data-theme="light"] .psb-card{box-shadow:0 10px 30px -18px rgba(15,23,42,.18)}
html[data-theme="light"] .psh-scard,html[data-theme="light"] .psp-fcard,
html[data-theme="light"] .psa-rc{box-shadow:0 8px 26px -20px rgba(15,23,42,.22)}

/* ---------- Dark mockup panels -> light cards ---------- */
html[data-theme="light"] .psh-panel,html[data-theme="light"] .psp-window{
  background:#ffffff !important;border-color:rgba(15,23,42,.1) !important;
  box-shadow:0 30px 70px -30px rgba(15,23,42,.3) !important;
}
html[data-theme="light"] .psh-panel-bar,html[data-theme="light"] .psp-winbar{
  background:#f1f2f7 !important;border-color:rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .psp-winurl{color:rgba(25,30,46,.5) !important}
html[data-theme="light"] .psp-winrow span{color:#454c5e !important}

/* ---------- Ghost buttons (had white text) ---------- */
html[data-theme="light"] .psh-btn-ghost,html[data-theme="light"] .psp-btn-ghost{color:#191e2e !important}
html[data-theme="light"] .psh-btn-ghost:hover,html[data-theme="light"] .psp-btn-ghost:hover{background:#eef0f6 !important}

/* ---------- Inputs ---------- */
html[data-theme="light"] .psh-input,html[data-theme="light"] .psp-input{
  background:#ffffff !important;color:#191e2e !important;border-color:rgba(15,23,42,.16) !important;
}
html[data-theme="light"] .psh-input::placeholder,html[data-theme="light"] .psp-input::placeholder{color:rgba(25,30,46,.4) !important}

/* ---------- Inline code ---------- */
html[data-theme="light"] .psa-content code{background:rgba(15,23,42,.07) !important;color:#9333ea}

/* ---------- Dividers / separators ---------- */
html[data-theme="light"] .psh-divider,html[data-theme="light"] .section-divider{
  background:linear-gradient(90deg,transparent,rgba(15,23,42,.12),transparent) !important;
}
html[data-theme="light"] .psa-nav{border-top-color:rgba(15,23,42,.1) !important}
html[data-theme="light"] .psh-grid-bg{
  opacity:.05 !important;
  background-image:linear-gradient(rgba(15,23,42,1) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,1) 1px,transparent 1px) !important;
}

/* ---------- Hover states that relied on white borders ---------- */
html[data-theme="light"] .psh-scard:hover,html[data-theme="light"] .psh-pcard:hover,
html[data-theme="light"] .psh-prow:hover,html[data-theme="light"] .psp-fcard:hover,
html[data-theme="light"] .psp-relcard:hover,html[data-theme="light"] .psa-rc:hover,
html[data-theme="light"] .psa-nav a:hover{
  border-color:rgba(139,92,246,.45) !important;background:#faf9ff !important;
}

/* ---------- WYSIWYG content (page.php) ---------- */
html[data-theme="light"] .psoft-content{color:#373d4f}
html[data-theme="light"] .psoft-content h1,html[data-theme="light"] .psoft-content h2,
html[data-theme="light"] .psoft-content h3,html[data-theme="light"] .psoft-content h4,
html[data-theme="light"] .psoft-content strong{color:#161a2b}
html[data-theme="light"] .psoft-content blockquote{color:#525a6d;border-inline-start-color:rgba(96,165,250,.7)}