/* sincllm theme tokens. Positional tone scale (t-0 darkest .. t-9 lightest in DARK theme).
   Light theme swaps the ends, so any fg/bg pair flips together (contrast preserved).
   Default = dark (matches the black logo). Switch via html[data-theme]. */
:root, html[data-theme="dark"] {
  --t-0: #0c0c0c; --t-0-rgb: 12,12,12;
  --t-1: #161616;
  --t-2: #1d1d1b;
  --t-3: #2b2b29;
  --t-5: #7a7a78;
  --t-6: #adadab;
  --t-7: #c8c8c6; --t-7-rgb: 200,200,198;
  --t-9: #f2f2f0; --t-9-rgb: 242,242,240;
  color-scheme: dark;
}
html[data-theme="light"] {
  --t-0: #f7f7f5; --t-0-rgb: 247,247,245;
  --t-1: #efefec;
  --t-2: #e6e6e3;
  --t-3: #d4d4d1;
  --t-5: #6f6f6d;
  --t-6: #565654;
  --t-7: #3a3a38; --t-7-rgb: 58,58,56;
  --t-9: #0c0c0c; --t-9-rgb: 12,12,12;
  color-scheme: light;
}

/* floating toggle button (token-styled, adapts to theme) */
.sl-theme-toggle {
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--t-3); background: var(--t-1); color: var(--t-9);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: background 0.2s, transform 0.2s;
}
.sl-theme-toggle:hover { background: var(--t-2); transform: translateY(-2px); }
.sl-theme-toggle:focus-visible { outline: 2px solid var(--t-9); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sl-theme-toggle { transition: none; } }