@layer atoms {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;

    &:hover { text-decoration: none; filter: brightness(0.97); }
    &[data-variant="primary"] { background: var(--color-accent); color: var(--color-accent-contrast); }
    &[data-variant="ghost"] { background: transparent; border-color: var(--color-border); }
    &[data-variant="danger"] { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
    &[data-size="l"] { min-height: 3.25rem; font-size: var(--text-l); padding: 0 var(--space-5); }
    &[data-size="s"] { min-height: 2.25rem; font-size: var(--text-s); padding: 0 var(--space-3); }
    &[data-block] { width: 100%; }
    &:disabled { opacity: 0.6; cursor: default; }
  }
}