/* Kit de componentes — camada ui dos widgets (opcional, junto do ui.js). */

/* Tokens com especificidade zero: o :root do site do cliente sempre ganha. */
:where(:root) {
  --ta-surface: color-mix(in srgb, currentColor 8%, transparent);
  --ta-radius: 16px;
}

:where([data-ta]) :focus-visible {
  outline: 2px solid var(--ta-accent, currentColor);
  outline-offset: 2px;
}

/* Botão de controle (setas, fechar, pausar): alvo de toque mínimo de 44×44 px. */
.ta-ctl {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}