/* ============================================================
   COMPONENT · TABS
   Selector switch bank. The active tab is engaged (glowing).
   ============================================================ */

.c-tabs {
  display: inline-flex;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-bezel-dark);
  border-radius: var(--radius-xs);
  padding: 2px;
  box-shadow: var(--shadow-inset-deep);
}

.c-tabs__tab {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.c-tabs__tab:hover { color: var(--color-text); }

.c-tabs__tab[aria-selected="true"],
.c-tabs__tab.is-active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent),
    0 0 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 80%, transparent);
}