/* Componente Link (Figma: DS › Link — Staus=Default | Hover) */
.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: var(--space-6) var(--space-11);
  border: 1px solid var(--color-background-default-lavender);
  border-radius: var(--radius-pill);
  background: var(--color-background-default-lavender);
  color: var(--color-branding-default-purple);
  font-family: var(--font-family-base);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-none);
  transition:
    background-color var(--motion-duration) var(--motion-easing),
    border-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}

/* Página atual (Figma: header da página Sobre mim): mesmo visual do hover, fixo */
.link[aria-current="page"],
.link:focus-visible {
  background: var(--color-background-secondary-white);
  border-color: var(--color-background-terciary-gray);
  box-shadow: var(--shadow-hover);
}

@media (hover: hover) {
  .link:hover {
    background: var(--color-background-secondary-white);
    border-color: var(--color-background-terciary-gray);
    box-shadow: var(--shadow-hover);
  }
}