@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--system-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    color: var(--paper-text);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
  }

  .button:hover { background: var(--accent-strong); text-decoration: none; }
  .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Seal — the important and the irreversible (confirm, remove). */
  .button--seal { background: var(--seal); }
  .button--seal:hover { background: var(--seal-strong); }

  /* Ghost — secondary action on paper. */
  .button--ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--rule-strong);
  }
  .button--ghost:hover { background: var(--surface); }

  .button--small { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

  .button[disabled], .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--vote-no);
  }

  .button .icon { width: 1em; height: 1em; }
}