/**
 * links.css - Link Components
 * 
 * Defines link components and their variations
 */

/* Standard Link */
.link {
  color: var(--color-text-accent-primary);
  text-decoration-color: var(--blue-6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast), 
              text-decoration-color var(--transition-fast);
}

.link:hover {
  color: var(--color-text-accent-secondary);
  text-decoration-color: currentColor;
}

.link:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.link:visited {
  color: var(--blue-11);
  text-decoration-color: var(--blue-5);
}

/* Navigation Link */
.nav-link {
  display: inline-block;
  font-size: var(--step-0);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--border-radius-small);
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--blue-3);
}

.nav-link:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.nav-link--active {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.nav-link--active:hover {
  background-color: var(--blue-3);
}