@layer components {
  .btn {
    --btn-bg: var(--color-brand);
    --btn-border: var(--color-brand);
    --btn-color: var(--color-on-brand);
    --btn-padding: 0.42em 0.9em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space-half);
    padding: var(--btn-padding);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition), background var(--transition), border-color var(--transition);
  }

  .btn:hover { filter: brightness(1.06); text-decoration: none; }
  .btn:active { filter: brightness(0.97); }
  .btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }

  /* Neutral / secondary */
  .btn--neutral {
    --btn-bg: var(--color-surface-raised);
    --btn-border: var(--color-border-strong);
    --btn-color: var(--color-text);
  }

  /* Destructive */
  .btn--danger {
    --btn-bg: var(--color-danger);
    --btn-border: var(--color-danger);
    --btn-color: var(--color-on-brand);
  }

  /* Consequential but not a deletion — a refund, a suspension. Amber, filled, to say "take care". */
  .btn--caution {
    --btn-bg: var(--color-caution);
    --btn-border: var(--color-caution);
    --btn-color: var(--color-on-brand);
  }

  /* Affirmative outline — confirm; green, and unfilled so its glyph reads on the row (a filled
     brand button hides a thin light glyph). */
  .btn--positive {
    --btn-bg: transparent;
    --btn-border: color-mix(in oklab, var(--color-positive) 45%, transparent);
    --btn-color: var(--color-positive);
  }
  .btn--positive:hover { --btn-bg: color-mix(in oklab, var(--color-positive) 12%, transparent); }

  /* No chrome — a link that sits in a button row */
  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-link);
    --btn-padding: 0.55em 0.6em;
  }
  .btn--ghost.btn--danger { --btn-color: var(--color-danger); }

  .btn--small {
    --btn-padding: 0.25em 0.6em;
    font-size: var(--text-x-small);
  }
}