/* TOOB360 — shared light/dark theming.
   Dark is the default (defined per-page in :root). Light overrides below.
   html[data-theme="light"] has higher specificity than :root, so it wins
   regardless of stylesheet order. */

html[data-theme="light"] {
  --bg:       #f5f5f7;
  --bg2:      #ffffff;
  --bg3:      #eeeef1;
  --bg4:      #e4e4e8;
  --border:   #d7d7dc;
  --gold:     #9c7c2e;
  --gold-dim: #836726;
  --text:     #1b1b1d;
  --muted:    #6c6c72;
  --danger:   #c0392b;
}

/* Smooth the switch */
html[data-theme] body,
html[data-theme] body * {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Floating theme toggle button (themed via the same variables) */
.toob-theme-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  padding: 0;
}
.toob-theme-toggle:hover { transform: scale(1.09); box-shadow: 0 6px 22px rgba(0,0,0,.34); }
.toob-theme-toggle:active { transform: scale(.96); }
.toob-theme-toggle svg { width: 20px; height: 20px; display: block; }