/* Component: buttons
 * Token-only styles for the Buttons component. NO hex literals — every color
 * comes from var(--color-*) defined in assets/tokens.css.
 */

.bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--rounded-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.bd-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Sizes */
.bd-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.bd-btn--md { height: 36px; padding: 0 16px; font-size: 14px; }
.bd-btn--lg { height: 44px; padding: 0 18px; font-size: 14px; }

.bd-btn--icon-sm { height: 28px; width: 28px; padding: 0; }
.bd-btn--icon-md { height: 36px; width: 36px; padding: 0; }
.bd-btn--icon-lg { height: 44px; width: 44px; padding: 0; }

/* Variants */
.bd-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.bd-btn--primary:hover    { background: var(--color-secondary); border-color: var(--color-secondary); }
.bd-btn--primary:active   { background: var(--color-secondary); border-color: var(--color-secondary); }

.bd-btn--secondary {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
  border-color: var(--color-border);
  font-weight: 400;
}
.bd-btn--secondary:hover  { background: var(--color-neutral-muted); }
.bd-btn--secondary:active { background: var(--color-neutral-strong); }

.bd-btn--ghost {
  background: transparent;
  color: var(--color-on-neutral);
  border-color: transparent;
}
.bd-btn--ghost:hover      { background: var(--color-neutral-muted); }

.bd-btn--destructive {
  background: var(--color-danger);
  color: var(--color-on-danger);
  border-color: var(--color-danger);
}
.bd-btn--destructive:hover { background: var(--color-danger); filter: brightness(0.92); }

.bd-btn--ghost-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.bd-btn--ghost-danger:hover { background: var(--color-danger-soft); }

.bd-btn--icon {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
  border-color: var(--color-border);
}
.bd-btn--icon:hover { background: var(--color-neutral-muted); }

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

.bd-btn-icon { display: inline-flex; align-items: center; }

.bd-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--rounded-pill);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: bd-btn-spin 0.8s linear infinite;
}
@keyframes bd-btn-spin { to { transform: rotate(360deg); } }