/* =====================================================================
   BUTTONS
   ===================================================================== */
button{
  cursor: pointer; border: none; border-radius: var(--r-md);
  padding: 11px 16px; font-weight: 600; font-size: .95em;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast), background var(--dur-fast);
}
button:active{ transform: scale(.97); }

.btn-main{ width: 100%; background: var(--accent); color: var(--accent-ink); }
.btn-main:hover{ filter: brightness(1.06); }

.btn-sm{ background: var(--accent); color: var(--accent-ink); padding: 7px 12px; font-size: .85em; }

.btn-outline{ background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.btn-outline-sm{ background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 7px 12px; font-size: .85em; }
.btn-outline:hover, .btn-outline-sm:hover{ background: var(--surface-sunken); }

.btn-danger{ background: var(--danger); color: #fff; }
.btn-danger-sm{ background: var(--danger-wash); color: var(--danger); padding: 6px 10px; font-size: .82em; }

.btn-danger-outline{
  background: var(--card); border: 1.5px solid var(--danger); color: var(--danger);
  border-radius: var(--r-md); padding: 9px 14px; font-weight: 700; font-size: .88em; white-space: nowrap;
}
.btn-danger-outline:hover{ background: var(--danger); color: #fff; }

.btn-danger-solid{
  background: var(--danger); border: none; color: #fff;
  border-radius: var(--r-md); padding: 9px 16px; font-weight: 700; font-size: .88em; white-space: nowrap;
}