/* =============================================================
   Socle · Lien (.sc-link)
   Variantes : --subtle (hérite la couleur du texte)
   ============================================================= */

.sc-link {
  --_link-color: var(--color-text-link);
  --_link-color-hover: var(--color-text-link-hover);

  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  color: var(--_link-color);
  font-weight: var(--text-label-weight);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: var(--space-2);
  border-radius: var(--radius-control-s);
  transition: color var(--motion-fast), text-decoration-color var(--motion-fast);
}

.sc-link:hover,
.sc-link[data-state="hover"] {
  color: var(--_link-color-hover);
  text-decoration-color: currentColor;
}

.sc-link:active,
.sc-link[data-state="active"] {
  color: var(--_link-color-hover);
}

.sc-link[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-link[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Hérite la couleur ambiante : pour les liens dans du texte secondaire,
   les navs, les footers. */
.sc-link--subtle {
  --_link-color: currentColor;
  --_link-color-hover: var(--color-text);
}