:root {
  --bg-primary: #1a1a2e;
  --bg-surface: #16213e;
  --bg-card: #222c4a;
  --accent: #d4a574;
  --text-primary: #e8e8e8;
  --text-muted: #8a8a9a;
  --danger: #c45c5c;
  --success: #5c9e8a;
  --border: #2d385a;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Custom styles mapping to CSS variables */
.bg-surface {
  background-color: var(--bg-surface);
}

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

.text-accent {
  color: var(--accent);
}

.text-muted {
  color: var(--text-muted);
}

.text-danger {
  color: var(--danger);
}

.text-success {
  color: var(--success);
}

.border-border {
  border-color: var(--border);
}

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

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

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

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

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}