/* ============================================
   Shared Button Styles
   ============================================ */

.wf-btn,
.modal-btn {
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 12px;
  font-family: "Courier New", "Gowun Batang", monospace, serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.wf-btn:hover,
.modal-btn:hover {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

.wf-btn.primary,
.modal-btn.primary {
  background: var(--accent-dark);
  color: var(--bg-primary);
  border-color: var(--accent-dark);
}

.wf-btn.primary:hover,
.modal-btn.primary:hover {
  background: var(--accent-black);
  border-color: var(--accent-black);
}

.wf-btn:disabled,
.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode primary buttons: use darker base with bright text/border */
html[data-theme="dark"] .modal-btn.primary {
  background: #333333;
  border-color: #f0f0f0;
  color: #f8f8f8;
}

html[data-theme="dark"] .modal-btn.primary:hover {
  background: #2a2a2a;
  border-color: #ffffff;
  color: #ffffff;
}