/* 11-color-scheme.css — dark mode token overrides */

html[data-color-scheme="dark"] {
  --color-sidebar-mist: #343434;
  --color-pure-white: #2c2c2c;
  --color-graphite-ink: #f3f3f3;
  --color-mid-ash: #b8b8b8;
  --color-hollow: #a0a0a0;
  --color-hairline: #ffffff24;
  --color-hover-veil: #ffffff12;
  --color-ink-press: #ffffff;
  --color-deep-charcoal: #000000b3;
  --color-edge-gray: #4e4e4e;

  --bg-tertiary: #373737;
  --scrollbar-thumb: rgba(255, 255, 255, 0.24);
  --surface-muted: rgba(44, 44, 44, 0.94);
  --surface-overlay-strong: rgba(0, 0, 0, 0.75);
  --force-overlay-background: rgba(0, 0, 0, 0.72);
  --select-caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a0a0a0'/%3E%3C/svg%3E");
}

/* === Color scheme toggle === */
.sidebar-top-leading {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.sidebar-top-brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-scheme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
}

.color-scheme-btn .color-scheme-icon {
  display: block;
}

.color-scheme-btn .color-scheme-icon[hidden] {
  display: none !important;
}