/* ============================================================
   JP ROBOTIC — THEME TOGGLE BUTTON (v2 / streamlined)

   Changed from the original:
   - Removed the html[data-bs-theme="..."] variable blocks and the
     unconditional :root block. They redefined --bg/--text/
     --heading/--muted/--border a third time (a fourth counting
     "A portfolio.css") with yet another set of values, and two of
     those three blocks were keyed to the "data-bs-theme" attribute,
     which nothing in the site's JS ever sets (the toggle sets
     "data-theme") — dead code that only added confusion. All theme
     variables now come from 00-tokens.css.
   - Kept everything that's actually specific to this component:
     the round toggle button visuals and the ".dim" text-muted
     helper used on "Done Right."
   ============================================================ */

h1, h2, h3, .jpr-h1 { color: var(--heading) !important; }
.dim { color: var(--muted) !important; }

.theme-toggle {
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--surface) !important;
  border: 1px solid var(--border);
  color: var(--heading) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  outline: none;
}
.theme-toggle:hover { border-color: var(--blue); background-color: var(--bg2) !important; }

.theme-icon { display: none; width: 18px; height: 18px; fill: currentColor; }
.theme-icon[data-active="true"] { display: block !important; }