/* ==========================================================================
   Componente: link
   Valores: 06-reference.css §10A / 07-visual-system.md §37
   ========================================================================== */

.fx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  color: var(--fx-color-carbon);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--fx-color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    color var(--fx-duration-fast) var(--fx-ease-standard),
    text-decoration-color var(--fx-duration-fast) var(--fx-ease-standard);
}

.fx-link:hover {
  color: var(--fx-color-primary);
  text-decoration-color: var(--fx-color-primary);
}

.fx-link--technical {
  color: var(--fx-color-primary);
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-label-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.fx-link--technical:hover {
  color: var(--fx-color-primary-deep);
}