@scope (.button) {
  :scope {
    --_bg: var(--color-primary);
    --_text: var(--color-text-on-primary);
    --_border: transparent;
    --_radius: var(--radius-lg);
    --_height: 2.85rem;
    --_padding-x: var(--space-xl);
    --_size: var(--text-base);
    --_weight: var(--font-medium);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: var(--_height);
    padding-inline: var(--_padding-x);
    background: var(--_bg);
    color: var(--_text);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    font-family: var(--font-body);
    font-size: var(--_size);
    font-weight: var(--_weight);
    line-height: var(--leading-none);
    cursor: pointer;
    text-decoration: none;

    &:hover {
      --_bg: var(--color-primary-hover);
      text-decoration: none;
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

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

  :scope.button--secondary {
    --_bg: var(--color-surface);
    --_text: var(--color-text);
    --_border: var(--color-border);

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

  :scope.button--danger {
    --_bg: var(--color-error);
    --_text: var(--color-text-on-primary);

    &:hover {
      --_bg: light-dark(var(--red-700), var(--red-400));
    }
  }

  :scope.button--ghost {
    --_bg: transparent;
    --_text: var(--color-text);
    --_border: transparent;

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

  :scope.button--icon {
    --_padding-x: var(--space-sm);
  }

  :scope.button--neutral {
    --_text: light-dark(var(--slate-400), var(--slate-500));
    color: var(--_text);

    .icon {
      color: var(--_text);
      fill: currentColor;
    }
  }
}