.button {
  border: var(--border);
  padding: 12px 18px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--color-dim);
}

.button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-dim);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

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

.primary {
  background: var(--color-fg);
  color: var(--color-bg);
}

.primary:hover:not(:disabled) {
  background: var(--color-accent);
}

.secondary {
  background: var(--color-bg);
  color: var(--color-fg);
}

.secondary:hover:not(:disabled) {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-fg);
}

.small {
  padding: 6px 10px;
  font-size: 8px;
  box-shadow: 2px 2px 0 var(--color-dim);
}

.small:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-dim);
}