/* ============================================================================
   ICTA Design System — Components (segmented theme switch + small chrome)
   ----------------------------------------------------------------------------
   Self-contained styles for the 3-theme segmented control rendered by
   theme-switcher.js. Kept separate from motion.css so it can be linked/omitted
   independently. Uses --icta-* tokens only.
   ============================================================================ */

.icta-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--icta-border);
  border-radius: var(--icta-radius-pill);
  background: var(--icta-surface-soft);
  flex-shrink: 0;
}

.icta-theme-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: var(--icta-radius-pill);
  color: var(--icta-text-secondary);
  font-family: var(--icta-font-sans);
  font-size: 9px;
  font-weight: var(--icta-weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--icta-motion-fast) var(--icta-motion-ease),
              color var(--icta-motion-fast) var(--icta-motion-ease);
}

.icta-theme-switch__btn:hover {
  color: var(--icta-text-primary);
  background: var(--icta-surface-hover);
}

.icta-theme-switch__btn.is-active {
  background: var(--icta-action);
  color: var(--icta-on-action);
}

.icta-theme-switch__btn:focus-visible {
  outline: none;
  box-shadow: var(--icta-focus-ring);
}

.icta-theme-switch__glyph { font-size: 10px; line-height: 1; }

/* Hide the text label on very narrow toolbars; keep the glyph + a11y label. */
@media (max-width: 640px) {
  .icta-theme-switch__label { display: none; }
  .icta-theme-switch__btn { padding: 0 6px; }
}