/* ── Onboarding theme tokens ─────────────────────────────────────────────── */
:root {
  --bg:             #edf1f8;
  --bg-card:        #FFFFFF;
  --text:           #0d1520;
  --text-muted:     #506070;
  --accent:         #00CCF7;
  --accent-dark:    #007899;
  --border:         rgba(0,0,0,0.07);
  --border-accent:  rgba(0,204,247,0.55);
  --border-success: rgba(5,150,105,0.45);
  --border-warning: rgba(217,119,6,0.45);
  --border-danger:  rgba(220,38,38,0.42);
  --border-info:    rgba(79,70,229,0.40);
  --nav-bg:         #132440;
}
html.dark {
  --bg:             #060B14;
  --bg-card:        #0D1520;
  --text:           rgba(255,255,255,0.92);
  --text-muted:     rgba(255,255,255,0.55);
  --accent:         #00CCF7;
  --accent-dark:    #00CCF7;
  --border:         rgba(255,255,255,0.20);
  --border-accent:  rgba(0,204,247,0.32);
  --border-success: rgba(5,150,105,0.38);
  --border-warning: rgba(217,119,6,0.38);
  --border-danger:  rgba(220,38,38,0.35);
  --border-info:    rgba(79,70,229,0.32);
  --nav-bg:         #050910;
}

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-accent);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  /* no extra margin — gap on parent wrapper handles spacing */
}
.theme-toggle:hover {
  background: rgba(0,204,247,0.12);
  color: var(--accent);
}
html.dark .theme-toggle { border-color: rgba(255,255,255,0.15); }
html.dark .theme-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; }