/* Elementos globais: foco, botões, links. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--tn-color-gold);
  outline-offset: 4px;
}

.tn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3.25rem;
  padding-inline: var(--tn-space-8);
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-gold);
  color: var(--tn-bg-deep);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tn-dur-micro) var(--tn-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tn-btn:hover { background: var(--tn-color-gold-light); }
}

.tn-link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 42% 1px no-repeat;
  transition: background-size var(--tn-dur-interface) var(--tn-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tn-link:hover { background-size: 100% 1px; }
}

.tn-sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Botão secundário = link de texto com sublinhado parcial (nunca um segundo botão encaixotado). */
.tn-btn--ghost {
  background: none;
  color: inherit;
  padding-inline: 0;
  border-radius: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.9rem);
  background-size: 42% 1px;
  transition: background-size var(--tn-dur-interface) var(--tn-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tn-btn--ghost:hover { background-color: transparent; background-size: 100% 1px; }
}

/* Hairline e grade de divisores no lugar de cards. */
.tn-hairline { border-block-start: 1px solid var(--tn-border); }
.tn-light .tn-hairline { border-block-start-color: var(--tn-border-light); }

/* Botão navy (sobre fundos claros/dourados). */
.tn-btn--navy { background: var(--tn-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .tn-btn--navy:hover { background: var(--tn-bg-primary); } }