@layer components {
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button:hover,
.button:focus {
  background: var(--surface-sunken);
}

.button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Size variants (BEM hooks used by shared/components/_button.html.erb) */
.button.button--sm {
  min-height: calc(var(--tap-min) * 0.75);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.button.button--lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-xl);
}

/* Color variants — BEM hooks (shared/components/_button.html.erb, most views) */
/* Primary = THE gold action (one per screen) */
.button.button--primary,
.button.primary {
  color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--border-strong);
}

.button.button--primary:hover,
.button.button--primary:focus,
.button.primary:hover,
.button.primary:focus {
  background-color: var(--accent-hover);
}

.button.button--secondary,
.button.secondary {
  color: var(--text);
  background-color: var(--surface);
  border-color: var(--border-strong);
}

.button.button--secondary:hover,
.button.button--secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
  background-color: var(--surface-sunken);
}

/* Affirmative = solid ink (matches ✓ approved badge) */
.button.button--success,
.button.success,
.button.approve {
  color: var(--on-brand);
  background-color: var(--brand);
  border-color: var(--brand);
}

.button.button--success:hover,
.button.button--success:focus,
.button.success:hover,
.button.success:focus,
.button.approve:hover,
.button.approve:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

/* Destructive = heavy ink outline (matches ✕ rejected badge) */
.button.button--danger,
.button.danger,
.button.delete,
.button.reject {
  color: var(--text);
  background-color: var(--surface);
  border-color: var(--border-strong);
  border-width: var(--border-width-thick);
}

.button.button--danger:hover,
.button.button--danger:focus,
.button.danger:hover,
.button.danger:focus,
.button.delete:hover,
.button.delete:focus,
.button.reject:hover,
.button.reject:focus {
  color: var(--on-brand);
  background-color: var(--brand);
}

.button.button--warning {
  color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--accent-hover);
}

.button.button--warning:hover,
.button.button--warning:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button.button--info {
  color: var(--on-brand);
  background-color: var(--brand);
  border-color: var(--brand);
}

.button.button--info:hover,
.button.button--info:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

.button.accent,
.button.submit {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-hover);
}

.button.accent:hover,
.button.accent:focus,
.button.submit:hover,
.button.submit:focus {
  background: var(--accent-hover);
}

/* Outline variants */
.button.button--outline,
.button.button--outline-primary {
  color: var(--brand);
  background-color: transparent;
  border-color: var(--brand);
}

.button.button--outline:hover,
.button.button--outline:focus,
.button.button--outline-primary:hover,
.button.button--outline-primary:focus {
  color: var(--on-brand);
  background-color: var(--brand);
}

.button.button--outline-secondary {
  color: var(--text-muted);
  background-color: transparent;
  border-color: var(--border-strong);
}

.button.button--outline-secondary:hover,
.button.button--outline-secondary:focus {
  color: var(--on-brand);
  background-color: var(--text-muted);
}

/* Disabled state */
.button:disabled,
.button.disabled {
  opacity: 0.65;
  pointer-events: none;
}

/* Button with icon */
.button i {
  margin-inline-end: var(--spacing-2);
}

/* Button group */
.button-group {
  display: inline-flex;
}

.button-group .button:not(:last-child) {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}

.button-group .button:not(:first-child) {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
  margin-inline-start: calc(var(--border-width-thick) * -1);
}
}