/* ===== Buttons ===== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  text-decoration: none;

  padding: var(--space-2xs) var(--space-s);
  border: none;
  border-radius: 0.5rem;

  font-size: var(--step--1);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);

  transition: background-color var(--duration-normal) var(--ease);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-text-inverse);
}

.btn-primary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, white);
  outline-offset: 3px;
  color: var(--color-text-inverse);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  text-decoration: none;

  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-text);
  border-radius: 0.5rem;

  font-size: var(--step--1);
  background-color: var(--color-surface);
  color: var(--color-text);

  transition: background-color var(--duration-normal) var(--ease);
}

.btn-secondary:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

.btn-secondary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, white);
  outline-offset: 3px;
  color: var(--color-text);
}

.btn-icon {
  width: var(--step-0);
  width: var(--step-0);
}