/* Generic button language shared across the Briefing, Activity, Money, and
   Users screens. Mirrors the visual language decision-card.css already
   established (cyan-bright primary, hairline secondary, quiet ghost) but as
   screen-agnostic classes so screens that don't load decision-card.css can
   still speak the same button language. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-settle),
    background var(--duration-fast) var(--ease-settle),
    border-color var(--duration-fast) var(--ease-settle),
    color var(--duration-fast) var(--ease-settle);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn--primary {
  background: var(--cyan-bright);
  color: var(--canvas-deep);
  box-shadow: 0 0 26px rgba(83, 217, 255, .12);
}

.btn--primary:hover:not(:disabled) {
  background: var(--ivory);
}

.btn--secondary {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text-secondary);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

.btn--ghost {
  background: transparent;
  color: var(--text-quiet);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--ivory);
}

.btn--danger {
  background: transparent;
  border-color: rgba(226, 86, 76, .4);
  color: var(--critical);
}

.btn--danger:hover:not(:disabled) {
  background: var(--critical-wash);
  border-color: var(--critical);
}

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

.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}