@layer components {
  .btn {
    --btn-bg: var(--color-canvas);
    --btn-color: var(--color-ink);
    --btn-border-color: oklch(var(--lch-ink-light));
    --btn-radius: var(--radius-pill);
    --btn-padding-inline: 1.1em;
    --btn-padding-block: 0.5em;

    align-items: center;
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-radius);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    font-size: var(--text-small);
    gap: 0.5em;
    justify-content: center;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
  }

  .btn:hover {
    --btn-border-color: oklch(var(--lch-ink-medium));
  }

  .btn:active {
    transform: scale(0.98);
  }

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

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

  /* Primary action */
  .btn--primary {
    --btn-bg: var(--color-link);
    --btn-color: oklch(var(--lch-canvas));
    --btn-border-color: transparent;
  }

  .btn--primary:hover {
    --btn-bg: var(--color-link-hover);
  }

  /* Destructive action */
  .btn--negative {
    --btn-bg: var(--color-negative);
    --btn-color: oklch(var(--lch-canvas));
    --btn-border-color: transparent;
  }

  /* Ghost button (no border, subtle hover) */
  .btn--ghost {
    --btn-bg: transparent;
    --btn-border-color: transparent;
  }

  .btn--ghost:hover {
    --btn-bg: var(--color-surface);
    --btn-border-color: transparent;
  }

  /* Small variant */
  .btn--small {
    --btn-padding-inline: 0.75em;
    --btn-padding-block: 0.3em;
    font-size: var(--text-xs);
  }

  /* Icon-only button */
  .btn--icon {
    --btn-padding-inline: 0.5em;
    --btn-padding-block: 0.5em;
    --btn-border-color: transparent;
    --btn-bg: transparent;
  }

  .btn--icon:hover {
    --btn-bg: var(--color-surface);
  }

  /* Full width on mobile */
  .btn--block {
    display: flex;
    inline-size: 100%;
  }
}