@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-size-base);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition:
      background var(--transition-base),
      color var(--transition-base),
      opacity var(--transition-base);
  }

  .btn-primary {
    background: var(--color-primary);
    color: var(--color-bg);

    &:hover {
      opacity: 0.85;
      color: var(--color-bg);
    }
  }

  .btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid #E5E5E5;

    &:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
  }
}