/* luma-theme-modes.css — Light/Dark modes (dark = not pure black)
   Works by overriding CSS variables when html[data-theme="dark"] is present.
   Smooth transitions for bg/fg.
*/

/* Smoothen transitions */
html, body{ transition: background-color .2s ease, color .2s ease; }

/* Dark palette (not full black) */
html[data-theme="dark"]{
  --bg:#0F141A;           /* deep blue-grey */
  --card:#151C24;         /* card surface */
  --border:#223041;
  --fg:#E6F2FF;           /* body text */
  --text:#E6F2FF;         /* for our light theme hooks */
  --muted:#A6BDD3;
  --accent:#12B3B3;       /* keep teal accent */
}

/* Apply to common elements that read tokens */
html[data-theme="dark"] body{ background:var(--bg); color:var(--fg); }
html[data-theme="dark"] .tile.card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section,
html[data-theme="dark"] .module,
html[data-theme="dark"] main a[href]:has(h2),
html[data-theme="dark"] main a[href]:has(h3){
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--fg) !important;
  box-shadow:none;
}
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .pill,
html[data-theme="dark"] table{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--fg) !important;
}

/* Form controls */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:#0F1720 !important;
  color:var(--fg) !important;
  border:1px solid #2A3A4D !important;
}

/* Links keep accent teal */
html[data-theme="dark"] a{ color:var(--accent) !important; }
html[data-theme="dark"] a:hover{ color:#0FA3A3 !important; }

/* Toggle UI (floating button) */
.lc-theme-toggle{
  position:fixed; top:14px; right:14px; z-index:9999;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  cursor:pointer; user-select:none;
}
.lc-theme-toggle .dot{
  width:10px; height:10px; border-radius:999px; background:var(--accent);
  box-shadow:0 0 8px rgba(18,179,179,.9);
}
@media (max-width:520px){
  .lc-theme-toggle{ top:10px; right:10px; padding:8px 10px; }
}