/**
 * Link — atomic primitive.
 *
 * Inline anchor styles. Two variants: default (purple) and inverse (light
 * on dark). Underline-on-rest by default — the brand reads as a link, not
 * a styled span. Hover deepens to action red.
 *
 * For "View all" / "Learn more" type CTAs that look like links but sit
 * as standalone elements, use button --tertiary instead.
 *
 * Markup:
 *   <a class="ds-link" href="...">inline text</a>
 *   <a class="ds-link ds-link--inverse" href="...">on dark</a>
 *   <a class="ds-link ds-link--subtle" href="...">low-emphasis</a>
 */

.ds-link {
  color: var(--ds-color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: currentColor;
  transition: text-decoration-thickness var(--ds-duration-instant) var(--ds-ease-default);
}

/*
 * Hover affordance is underline thickening, not colour change.
 * Body-weight red on light surface fails WCAG AA body contrast (3.79:1).
 * The button primitive uses red-on-light for primary because it's always
 * bold (qualifies as large text); links are body-weight and can't.
 */
.ds-link:hover {
  text-decoration-thickness: 2px;
}

.ds-link:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-ring-offset);
  border-radius: var(--ds-radius-sm);
}

.ds-link:visited { color: var(--ds-color-text-link); }

/* ─── Inverse — for use on dark backgrounds ──────────────────── */
.ds-link--inverse,
.ds-link--inverse:visited {
  color: var(--ds-color-brand-highlight);
}
.ds-link--inverse:hover {
  color: var(--ds-color-brand-highlight-soft);
}

/* ─── Subtle — quiet link inside body copy ───────────────────── */
.ds-link--subtle,
.ds-link--subtle:visited {
  color: var(--ds-color-text-secondary);
  text-decoration-color: var(--ds-color-border-subtle);
}
.ds-link--subtle:hover {
  color: var(--ds-color-brand-primary);
  text-decoration-color: currentColor;
}

/* ─── External-link icon-after pattern ───────────────────────── */
.ds-link--external::after {
  content: " ↗";
  display: inline-block;
  margin-left: var(--ds-space-3xs);
  text-decoration: none;
}