:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: 150ms ease;
}

.btn:disabled {
  opacity: 0.5;
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: 150ms ease;
  background: #2f7cf3;
  color: #ffffff;
}

.btn-blue:hover {
  background: #2a6fe0;
}

.btn-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: 150ms ease;
  background: #fbbf24;
  color: #ffffff;
}

.btn-yellow:hover {
  background: #fcd34d;
}

.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: 150ms ease;
  background: #ef4444;
  color: #ffffff;
}

.btn-red:hover {
  background: #dc2626;
}

.btn-red-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: 150ms ease;
  background: #ef4444;
  color: #ffffff;
}

.btn-red-sm:hover {
  background: #dc2626;
}