.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;

  &[data-variant="primary"] {
    background-color: var(--color-primary);
    color: #fff;

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

  &[data-variant="outline"] {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--theme-text);

    &:hover { background-color: var(--theme-surface-muted); }
  }

  &[data-variant="ghost"] {
    background-color: transparent;
    color: var(--theme-text-subtle);

    &:hover { background-color: var(--theme-surface-muted); color: var(--theme-text); }
  }

  &[data-variant="danger"] {
    background-color: var(--color-danger);
    color: #fff;

    &:hover { opacity: 0.9; }
  }

  &[data-size="sm"] {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  &[data-size="lg"] {
    font-size: var(--text-base);
    padding: var(--space-md) var(--space-lg);
  }

  &:disabled, &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  &[data-full] {
    inline-size: 100%;
  }
}