/* ============================================================
   THEME TERANG (P5) — item TODO "theme terang butuh desain
   terang matang" sekarang diimplementasikan lewat CSS variables:
   semua komponen yang memakai var(--bg/panel/text/dst) otomatis
   ikut tema. Prinsip:
   1. Override SEMUA variabel dari DUA blok :root di style.css
      (palette dasar + "Quantum Pulse UI Refresh").
   2. Aksen kunci (buy/sell/warn/accent) dipertahankan hue-nya
      tapi digelapkan supaya kontras di atas putih (WCAG-ish).
   3. Layar login (#authScreen) sengaja TETAP gelap — itu halaman
      branding dengan visual gelap yang dirancang khusus; variabel
      gelap di-declare ulang di scope-nya.
   4. Elemen dengan warna hardcode ter-hitam paling terlihat
      (input & modal inline-style) dioverride eksplisit.
   Toggle: tombol 🔆/🌙 di header (features.js), tersimpan di
   localStorage 'qt-theme', di-apply pre-paint oleh js/theme-init.js.
   ============================================================ */

html[data-theme="light"]{
  /* -- palette dasar (blok :root pertama) -- */
  --bg:            #F3F5F9;
  --bg-raised:     #FFFFFF;
  --panel:         #FFFFFF;
  --panel-2:       #F6F8FC;
  --border:        #DCE1EC;
  --border-soft:   #E6EAF3;
  --text-1:        #17202E;
  --text-2:        #55607A;
  --text-3:        #8B94AB;

  --buy:           #0E9F5C;
  --buy-dim:       #DCF5E8;
  --buy-glow:      rgba(14,159,92,.16);
  --sell:          #D92642;
  --sell-dim:      #FBE3E7;
  --sell-glow:     rgba(217,38,66,.14);
  --warn:          #B26E08;
  --warn-dim:      #FCF0D8;
  --neutral:       #67718A;
  --neutral-dim:   #EAEDF4;
  --accent:        #2563EB;
  --accent-dim:    #E3ECFE;

  /* -- override blok "Quantum Pulse" (menang karena muncul belakangan) -- */
  --bg:            #F3F5F9;
  --bg-raised:     #FFFFFF;
  --panel:         #FFFFFF;
  --panel-2:       #F6F8FC;
  --border:        #DCE1EC;
  --border-soft:   #E6EAF3;
  --text-1:        #191D2E;
  --text-2:        #575E77;
  --text-3:        #8A90A6;
  --accent:        #6D4FE0;
  --accent-dim:    rgba(109,79,224,.11);
  --buy:           #0B9E5B;
  --buy-dim:       rgba(11,158,91,.11);
  --buy-glow:      rgba(11,158,91,.17);
  --sell:          #DF3050;
  --sell-dim:      rgba(223,48,80,.10);
  --warn:          #A96D05;
  --warn-dim:      rgba(169,109,5,.11);

  color-scheme: light;
}

/* Latar body: tint ungu/teal sangat tipis di atas abu terang */
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 8% -8%, rgba(109,79,224,.05), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(11,158,91,.04), transparent 24rem),
    var(--bg);
}

/* Scrollbar mengikuti border terang */
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#CBD2E1; }

/* ---- Shadow tipis biar panel putih tidak menyatu dengan bg ---- */
html[data-theme="light"] header.topbar,
html[data-theme="light"] .ticker-strip,
html[data-theme="light"] footer.bottombar{
  box-shadow: 0 1px 3px rgba(23,32,46,.05);
}

/* ---- Panel input inline-style gelap (modal Pengaturan Akun, dsb.) ----
   Style inline menang atas stylesheet biasa, jadi pakai !important. */
html[data-theme="light"] #accountSettingsModal > div{ background:#FFFFFF !important; border-color:var(--border) !important; }
html[data-theme="light"] #accountSettingsModal h3,
html[data-theme="light"] #accountSettingsModal label{ color:var(--text-1) !important; }
html[data-theme="light"] #accountSettingsModal label[style*="rgba(242,242,248,.75)"]{ color:var(--text-2) !important; }
html[data-theme="light"] #accountSettingsModal button[type="button"]{ color:var(--text-1) !important; border-color:var(--border) !important; }
html[data-theme="light"] #accountSettingsModal input,
html[data-theme="light"] #accountSettingsModal #exLabel,
html[data-theme="light"] #accountSettingsModal #exApiKey,
html[data-theme="light"] #accountSettingsModal #exApiSecret,
html[data-theme="light"] #accountSettingsModal #evEmail{
  background:#F6F8FC !important; color:var(--text-1) !important; border-color:#C9D2E4 !important;
}
html[data-theme="light"] #accountSettingsModal input::placeholder{ color:var(--text-3); }
html[data-theme="light"] #accountSettingsModal div[style*="rgba(255,255,255,.08)"],
html[data-theme="light"] #accountSettingsModal div[style*="rgba(255,255,255,.1)"]{ border-color:var(--border-soft) !important; }
html[data-theme="light"] #accountSettingsModal small,
html[data-theme="light"] #accountSettingsModal div[style*="rgba(242,242,248,.55)"],
html[data-theme="light"] #accountSettingsModal div[style*="rgba(242,242,248,.5)"]{ color:var(--text-3) !important; }
html[data-theme="light"] #accountSettingsModal #avatarFileName{ color:var(--text-3) !important; }
html[data-theme="light"] #accountSettingsModal #exchangeAccountsList div[style*="background:#0b0c14"]{ background:#F6F8FC !important; }
/* Overlay modal tetap gelap transparan di kedua tema — sudah benar. */

/* ---- Layar login: kembali gelap penuh (branding dark) ---- */
html[data-theme="light"] #authScreen{
  --bg:            #08090F;
  --bg-raised:     #0D0F18;
  --panel:         #111421;
  --panel-2:       #171A2A;
  --border:        #252A3C;
  --border-soft:   #1B1F2E;
  --text-1:        #F4F2FF;
  --text-2:        #A6A8BD;
  --text-3:        #6F738A;
  --accent:        #F97316;
  --accent-dim:    rgba(249,115,22,.14);
  --buy:           #63E6A4;
  --sell:          #FF7185;
  --warn:          #FFD166;
  color-scheme: dark;
}
html[data-theme="light"] body.auth-locked{ background:var(--bg); }