:root,
html[data-theme="light"],
html[data-tokenbat-theme="light"],
body.light-mode {
  --tb-color-primary: #b9fb6a;
  --tb-color-bg: #ffffff;
  --tb-color-surface: #ffffff;
  --tb-color-surface-soft: #f7f8fb;
  --tb-color-surface-strong: #f1fee1;
  --tb-color-text: #0e0e0e;
  --tb-color-text-muted: #696969;
  --tb-color-border: #eeeeee;
  --tb-color-input: #ffffff;
  --tb-color-overlay: #0e0e0ed0;
  --tb-shadow-soft: 0 24px 90px rgba(14, 14, 14, 0.08);

  --sasi-color-primary: var(--tb-color-primary);
  --sasi-color-text-main: var(--tb-color-text-muted);
  --sasi-color-white: var(--tb-color-surface);
  --sasi-bg-color-white: var(--tb-color-bg);
  --sasi-color-dark: var(--tb-color-text);
  --sasi-color-gray: var(--tb-color-border);
  --sasi-bg-color-gray: var(--tb-color-border);
  --sasi-bg-color-green: var(--tb-color-surface-strong);
  --sasi-body-font-color: var(--tb-color-text-muted);
  --sasi-body-bg-color: var(--tb-color-bg);
  --sasi-heading-color: var(--tb-color-text);
  --sasi-color-link: var(--tb-color-text-muted);
  --sasi-color-text-input: var(--tb-color-text-muted);
  --sasi-bg-color-input: var(--tb-color-input);
  --sasi-border-color: var(--tb-color-border);
  --sasi-border-color-input: var(--tb-color-border);
  --sasi-bg-dark-overlay: var(--tb-color-overlay);
}

html[data-theme="dark"],
html[data-tokenbat-theme="dark"],
html.dark,
body.dark-mode {
  --tb-color-primary: #b9fb6a;
  --tb-color-bg: #090d16;
  --tb-color-surface: #090d16;
  --tb-color-surface-soft: #0e1421;
  --tb-color-surface-strong: #0e1421;
  --tb-color-text: #ffffff;
  --tb-color-text-muted: #ffffffa6;
  --tb-color-border: #ffffff1a;
  --tb-color-input: #0e1421;
  --tb-color-overlay: #0e1421d0;
  --tb-shadow-soft: 0 24px 120px rgba(0, 0, 0, 0.32);

  --sasi-color-primary: var(--tb-color-primary);
  --sasi-color-text-main: var(--tb-color-text-muted);
  --sasi-color-white: var(--tb-color-surface);
  --sasi-bg-color-white: var(--tb-color-bg);
  --sasi-color-dark: var(--tb-color-text);
  --sasi-color-gray: var(--tb-color-border);
  --sasi-bg-color-gray: var(--tb-color-border);
  --sasi-bg-color-green: var(--tb-color-surface-strong);
  --sasi-body-font-color: var(--tb-color-text-muted);
  --sasi-body-bg-color: var(--tb-color-bg);
  --sasi-heading-color: var(--tb-color-text);
  --sasi-color-link: var(--tb-color-text-muted);
  --sasi-color-placeholder-input: #ffffff60;
  --sasi-color-text-input: var(--tb-color-text-muted);
  --sasi-bg-color-input: var(--tb-color-input);
  --sasi-border-color: var(--tb-color-border);
  --sasi-border-color-input: var(--tb-color-border);
  --sasi-border-focus-input: #ffffff80;
  --sasi-bg-dark-overlay: var(--tb-color-overlay);
}

body.tokenbat-theme-enabled {
  background: var(--tb-color-bg);
  color: var(--tb-color-text-muted);
}

.tokenbat-theme-light [data-tokenbat-mode="dark"],
.tokenbat-theme-dark [data-tokenbat-mode="light"],
html[data-theme="light"] [data-tokenbat-mode="dark"],
html[data-theme="dark"] [data-tokenbat-mode="light"],
html[data-tokenbat-theme="light"] [data-tokenbat-mode="dark"],
html[data-tokenbat-theme="dark"] [data-tokenbat-mode="light"] {
  display: none !important;
}

.tokenbat-theme-toggle-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

.tokenbat-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--tb-color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tb-color-surface) 90%, transparent);
  box-shadow: var(--tb-shadow-soft);
  color: var(--tb-color-text);
  cursor: pointer;
  font: 600 14px/1 var(--sasi-font-second, sans-serif);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.tokenbat-theme-toggle__track {
  position: relative;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  background: var(--tb-color-surface-strong);
}

.tokenbat-theme-toggle__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--tb-color-primary);
  transition: transform 180ms ease;
}

.tokenbat-theme-toggle[aria-pressed="true"] .tokenbat-theme-toggle__thumb {
  transform: translateX(26px);
}

.tokenbat-theme-toggle:focus-visible {
  outline: 2px solid var(--tb-color-primary);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .tokenbat-theme-toggle-dock {
    right: 14px;
    bottom: 14px;
  }
}