/* ── Base ──────────────────────────────────────────────────────────────────── */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-regular);
  line-height: var(--uris-text-sm-line);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition:
    color  var(--uris-duration-fast) var(--uris-ease-default),
    filter var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
.link-sm {
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
}

.link-lg {
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  gap: var(--uris-spacing-2);
}

/* ── Icon element ──────────────────────────────────────────────────────────── */
.link__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.link__spinner {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--uris-radius-full);
  animation: spinner-rotate var(--uris-duration-spinner) linear infinite;
}

/* ── VARIANT: Primary ──────────────────────────────────────────────────────── */
.link-primary {
  color: var(--uris-color-semantic-link);
}

.link-primary:not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  filter: brightness(0.8);
}

.link-primary:not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.65);
}

/* ── VARIANT: Secondary ────────────────────────────────────────────────────── */
/* semantic.secondary (gray-700, 5.7:1) over semantic.text-muted (gray-500, 4.3:1) —
   text-muted falls below WCAG AA 4.5:1 for interactive text at 14px regular */
.link-secondary {
  color: var(--uris-color-semantic-secondary);
}

.link-secondary:not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  filter: brightness(0.7);
}

.link-secondary:not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.55);
}

/* ── VARIANT: Ghost ────────────────────────────────────────────────────────── */
/*
 * No underline by default — intended for navigation contexts where surrounding
 * UI (nav bar, breadcrumbs, sidebars) communicates interactivity.
 * Do NOT use ghost links inline within body text (violates WCAG 1.4.1).
 */
.link-ghost {
  color: var(--uris-color-semantic-accent);
  text-decoration: none;
}

.link-ghost:not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  text-decoration: underline;
  filter: brightness(0.8);
}

.link-ghost:not([aria-disabled="true"]):not([aria-busy="true"]):active {
  text-decoration: underline;
  filter: brightness(0.65);
}

/* ── VARIANT: Danger ───────────────────────────────────────────────────────── */
.link-danger {
  color: var(--uris-color-semantic-danger);
}

.link-danger:not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  filter: brightness(0.85);
}

.link-danger:not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.7);
}

/* ── Focus visible ─────────────────────────────────────────────────────────── */
.link:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
  border-radius: var(--uris-radius-sm);
}

/* ── Disabled ──────────────────────────────────────────────────────────────── */
/* aria-disabled keeps element focusable so screen readers announce its state */
.link[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Loading ───────────────────────────────────────────────────────────────── */
.link[aria-busy="true"] {
  pointer-events: none;
  cursor: wait;
  text-decoration: none;
}

/* ── Error ─────────────────────────────────────────────────────────────────── */
.link--error {
  color: var(--uris-color-semantic-danger);
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .link {
    transition: none;
  }
  .link__spinner {
    animation: none;
  }
}