/* ===== BPD Theme Switcher — 3 Schemes ===== */

/* Transition class — applied briefly during switch */
.theme-t,.theme-t *,.theme-t *::before,.theme-t *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,opacity .45s ease !important;
}

/* ——————————————————————————————
   MEDIUM (grey) theme
   —————————————————————————————— */
[data-theme="medium"]{
  --abyss:#2c2c38;
  --deep:#343444;
  --surface:#3c3c4c;
  --surface-2:#444456;
  --surface-3:#4c4c5e;
  --gold:#d4b040;
  --gold-glow:#e0c050;
  --gold-bright:#f0d860;
  --gold-dim:#b08828;
  --gold-muted:#8a6e20;
  --steel:#cdd2da;
  --iron:#a4aab6;
  --graphite:#78808e;
  --coal:#4e5668;
  --white:#f0ebe3;
  --red-soft:#d04848;
  --green-soft:#48b068;
  --deep-glass:rgba(52,52,68,.6);
  --surface-glass:rgba(60,60,76,.62);
  --surface-2-glass:rgba(68,68,86,.64);
  --coal-glass:rgba(78,86,104,.35)
}

/* ��—————————————————————————————
   LIGHT (white) theme
   —————————————————————————————— */
[data-theme="light"]{
  --abyss:#f0ece4;
  --deep:#ffffff;
  --surface:#f5f3ee;
  --surface-2:#eae7e0;
  --surface-3:#e0ddd6;
  --gold:#8c6e10;
  --gold-glow:#7c6210;
  --gold-bright:#a08018;
  --gold-dim:#685008;
  --gold-muted:#584808;
  --steel:#2e2e3a;
  --iron:#50505e;
  --graphite:#88889a;
  --coal:#ccc8c0;
  --white:#141420;
  --red-soft:#b43030;
  --green-soft:#2c8850;
  --deep-glass:rgba(240,236,228,.72);
  --surface-glass:rgba(255,255,255,.75);
  --surface-2-glass:rgba(234,231,224,.78);
  --coal-glass:rgba(204,200,192,.35)
}

/* ——— html / body overrides ——— */
[data-theme="medium"]{background:#2c2c38}
[data-theme="light"]{background:#f0ece4}

[data-theme="light"] body{
  box-shadow:0 0 80px rgba(0,0,0,.08)
}
[data-theme="medium"] body{
  box-shadow:0 0 80px rgba(0,0,0,.4)
}

/* ——— Nav ——— */
[data-theme="medium"] nav{
  background:rgba(44,44,56,.78)!important;
  border-bottom-color:rgba(200,160,48,.08)!important
}
[data-theme="light"] nav{
  background:rgba(240,236,228,.88)!important;
  border-bottom-color:rgba(140,110,16,.1)!important
}

/* ——— Selection ——— */
[data-theme="light"] ::selection{
  background:var(--gold);color:#fff
}

/* ——— Hero canvas opacity ——— */
[data-theme="medium"] #heroCanvas{opacity:.6}
[data-theme="light"] #heroCanvas{opacity:.18}

/* ——— Overlays with hardcoded dark backgrounds ——— */
[data-theme="medium"] .demo-overlay,
[data-theme="medium"] .shelf-cta-overlay{
  background:linear-gradient(to top,rgba(44,44,56,.75) 0%,transparent 60%)
}
[data-theme="light"] .demo-overlay,
[data-theme="light"] .shelf-cta-overlay{
  background:linear-gradient(to top,rgba(240,236,228,.8) 0%,transparent 60%)
}

/* ——— Landing page body overlays ——— */
[data-theme="medium"] body::after{
  background:radial-gradient(ellipse at center,transparent 40%,rgba(44,44,56,.65) 100%)!important
}
[data-theme="light"] body::after{
  background:radial-gradient(ellipse at center,transparent 40%,rgba(240,236,228,.5) 100%)!important
}
[data-theme="light"] body::before{
  opacity:.025!important
}
[data-theme="medium"] body::before{
  opacity:.035!important
}

/* ——— Form select options ——— */
[data-theme="light"] .form-group select option{
  background:#fff;color:#141420
}
[data-theme="medium"] .form-group select option{
  background:#343444;color:#f0ebe3
}

/* ——— Hamburger menu ——— */
[data-theme="light"] .hamburger span{background:var(--iron)}
[data-theme="light"] .hamburger{border-color:var(--coal)}

/* ——— Portal tooltip ——— */
[data-theme="light"] .portal-tooltip{
  background:rgba(255,255,255,.95)!important;
  color:#2e2e3a!important;
  border-color:rgba(140,110,16,.15)!important
}
[data-theme="medium"] .portal-tooltip{
  background:rgba(52,52,68,.95)!important
}

/* ——— Divider diamonds ——— */
[data-theme="light"] .divider-diamond::before{
  border-color:var(--coal)!important
}

/* ——— Review offer box ——— */
[data-theme="light"] .review-offer{
  background:rgba(140,110,16,.04)!important;
  border-color:rgba(140,110,16,.12)!important
}
[data-theme="medium"] .review-offer{
  background:rgba(200,160,48,.04)!important
}

/* ===================================================
   FLOATING PILL SWITCHER
   =================================================== */
.theme-switcher{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:9998;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:40px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  user-select:none;
  -webkit-user-select:none
}
[data-theme="light"] .theme-switcher{
  background:rgba(255,255,255,.78);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.06)
}
[data-theme="medium"] .theme-switcher{
  background:rgba(30,30,40,.6);
  border-color:rgba(255,255,255,.06)
}

.theme-label{
  font-family:'Outfit',sans-serif;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  margin-right:4px;
  pointer-events:none
}
[data-theme="light"] .theme-label{
  color:rgba(0,0,0,.3)
}

.theme-btn{
  width:26px;height:26px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition:all .3s cubic-bezier(.23,1,.32,1);
  outline:none;
  padding:0;
  -webkit-appearance:none;
  appearance:none
}
.theme-btn:hover{
  transform:scale(1.12)
}
.theme-btn.active{
  transform:scale(1.18);
  border-color:#c8a030;
  box-shadow:0 0 10px rgba(200,160,48,.25)
}
[data-theme="light"] .theme-btn{
  border-color:rgba(0,0,0,.1)
}
[data-theme="light"] .theme-btn.active{
  border-color:#8c6e10;
  box-shadow:0 0 10px rgba(140,110,16,.2)
}

/* Button colors */
.theme-btn[data-theme="dark"]{
  background:#0c0c12
}
.theme-btn[data-theme="medium"]{
  background:linear-gradient(135deg,#3c3c4c,#4c4c5e)
}
.theme-btn[data-theme="light"]{
  background:linear-gradient(135deg,#ede8e0,#fff)
}
[data-theme="light"] .theme-btn[data-theme="dark"]{
  border-color:rgba(0,0,0,.2)
}

/* ——— Mobile ——— */
@media(max-width:600px){
  .theme-switcher{
    bottom:14px;right:14px;
    padding:6px 12px;
    gap:5px
  }
  .theme-btn{width:24px;height:24px}
  .theme-label{font-size:.52rem;margin-right:2px}
}