/* =======================================================
   PROGRAMMER.CSS — Custom styles for Programmer Calc
   ======================================================= */

.base-btn {
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 800;
  font-size: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.base-btn.active {
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 4px 15px -1px var(--accent-glow);
  border-color: transparent;
}

.key-btn {
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.key-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.key-btn:active:not(:disabled) {
  transform: translateY(0);
}

.key-btn.op {
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 0.7rem;
}

.key-btn.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.key-btn.hex {
  background: rgba(59, 130, 246, 0.05);
}

.key-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}