/* ============================================================
   SIGNA — theme.css · light-mode token swaps
   Applied via html[data-theme="light"]. Default follows system.
   ============================================================ */
html[data-theme="light"] {
  --accent: #3E8E00;
  --accent-hover: #58A700;
  --accent-2: #0B84C6;
  --accent-2-hover: #0876B5;
  --on-accent: #FFFFFF;
  --on-accent-2: #FFFFFF;
  --on-warning: #FFFFFF;
  --glow: rgba(88, 204, 2, 0.22);
  --accent-soft: rgba(88, 204, 2, 0.12);
  --accent-border: rgba(62, 142, 0, 0.42);
  --accent-2-soft: rgba(28, 176, 246, 0.13);
  --success: #3E8E00;
  --success-soft: rgba(88, 204, 2, 0.14);
  --warning: #A86E00;
  --warning-soft: rgba(255, 200, 0, 0.20);
  --error: #D33131;
  --error-soft: rgba(255, 75, 75, 0.12);
  --bg: #F7FAFC;
  --surface: #FFFFFF;
  --surface-elevated: #EEF4F6;
  --border: #D8E3E7;
  --text-primary: #24333B;
  --text-secondary: #5B7180;
  --text-muted: #8A9BA5;
  --shadow: 0 2px 16px rgba(19, 31, 36, 0.08);
  --shadow-lg: 0 16px 40px rgba(19, 31, 36, 0.13);
  --toggle-bg: #E4EEF2;
  --toggle-border: #B7CBD3;
  --camera-bg: #131F24;
  --dot: rgba(36, 51, 59, 0.05);
}

/* Smooth the swap without animating layout */
body, .card, .btn, .topbar, .sidebar, .siggy-panel, .bottom-nav,
.module-card, .sign-card, .feedback-bar, input, select, textarea {
  transition: background-color 300ms var(--ease-inout),
              border-color 300ms var(--ease-inout),
              color 300ms var(--ease-inout);
}

/* ---- Theme toggle pill (56×28) ---- */
.theme-toggle {
  position: relative; flex: none;
  width: 56px; height: 28px; border-radius: var(--radius-full);
  background: var(--toggle-bg); border: 1px solid var(--toggle-border);
  transition: background 300ms var(--ease-inout), border-color 300ms var(--ease-inout);
}
.theme-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  transform: translateX(0);
  transition: transform 300ms var(--ease-inout);
}
.theme-toggle__thumb svg { width: 13px; height: 13px; }
html[data-theme="light"] .theme-toggle__thumb { transform: translateX(28px); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.theme-toggle::after { content: ""; position: absolute; inset: -10px -6px; }