/* ============================================================
   BUTTON SYSTEM - Single source of truth for all button styles
   ============================================================ */

/* ---- Base ---- */
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: var(--transition-interactive), var(--transition-colors);
}

/* ---- Variants ---- */

/* Primary */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-primary-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-primary-md);
}

.btn-primary:active {
  box-shadow: var(--shadow-xs);
}

.btn-primary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-primary-md), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 5px rgba(33, 35, 73, 0.5);
}

/* Secondary */
.btn-secondary,
button.btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-medium);
}

.btn-secondary:active {
  background: var(--color-bg-tertiary);
}

.btn-secondary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius-md);
}

.btn-ghost:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.btn-ghost:active {
  background: var(--color-bg-tertiary);
}

.btn-ghost:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* Danger */
.btn-danger {
  background: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, var(--color-error-600), var(--color-error-600));
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

.btn-danger:active {
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.2);
}

.btn-danger:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4), 0 0 0 3px rgba(211, 47, 47, 0.3);
}

/* Warning */
.btn-warning {
  background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600));
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--color-warning-600), var(--color-warning-600));
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.btn-warning:active {
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.btn-warning:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4), 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* ---- Sizes ---- */

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-large {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

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

/* ---- Compound variants ---- */

/* Ghost danger modifier */
.btn-ghost.danger {
  color: var(--color-error-600, #dc2626);
}

.btn-ghost.danger:hover {
  background: var(--color-error-50, #fef2f2);
}

/* Remove button (form-specific) */
.btn-remove {
  background: transparent;
  color: var(--color-error-500);
  border: 1px solid var(--color-error-300);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: none;
}

.btn-remove:hover {
  background: var(--color-error-50);
  border-color: var(--color-error-500);
  box-shadow: none;
}

.btn-remove:disabled {
  color: var(--color-text-disabled);
  border-color: var(--color-border-light);
  background: transparent;
}

/* Example button (form-specific) */
.btn-example {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-moderate) var(--ease-out);
}

.btn-example:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

/* ---- Modal button overrides ---- */

dialog .form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-interactive), var(--transition-colors);
}

dialog .btn-secondary {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}

dialog .btn-secondary:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-sm);
}

dialog .btn-secondary:active {
  background: var(--color-bg-tertiary);
}

dialog .btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

dialog .btn-primary {
  background: var(--gradient-primary);
  border: 1px solid var(--color-primary-500);
  color: white;
  box-shadow: var(--shadow-primary-sm);
}

dialog .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  border-color: var(--color-primary-600);
  box-shadow: var(--shadow-primary-md);
}

dialog .btn-primary:active {
  box-shadow: var(--shadow-xs);
}

dialog .btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-primary-md), var(--shadow-focus);
}

dialog .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

dialog .btn-warning {
  background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600));
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

dialog .btn-warning:hover {
  background: linear-gradient(135deg, var(--color-warning-600), var(--color-warning-600));
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

dialog .btn-warning:active {
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

dialog .btn-warning:focus-visible {
  outline: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4), 0 0 0 3px rgba(245, 158, 11, 0.3);
}

dialog .btn-danger {
  background: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
}

dialog .btn-danger:hover {
  background: linear-gradient(135deg, var(--color-error-600), var(--color-error-600));
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

dialog .btn-danger:active {
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.2);
}

dialog .btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4), 0 0 0 3px rgba(211, 47, 47, 0.3);
}

/* ---- Mobile touch targets ---- */
/* #678: 44px minimum touch target (Apple HIG / WCAG 2.5.5) at the same
   breakpoint as the stacked header (#666); desktop density is unchanged */
@media (max-width: 768px) {
  .btn,
  button.btn {
    min-height: 44px;
  }
}

/* ---- Forced colors (High Contrast Mode) ---- */
@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }

  .btn:focus-visible {
    outline: 2px solid Highlight;
  }
}