html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  --surface: #111318;
  --surface-raised: #191d24;
  --surface-soft: #222832;
  --border: #343b47;
  --text: #e8edf3;
  --muted: #aab4c0;
  --accent: #4fb286;
  --accent-strong: #64c89a;
  --danger-soft: #3a2024;
}

body {
  min-height: 100%;
  margin-bottom: 60px;
  background: var(--surface);
  color: var(--text);
}

a {
  color: var(--accent-strong);
}

.navbar {
  background: #151923;
}

.navbar-brand,
.navbar .nav-link,
.navbar-text {
  color: var(--text) !important;
}

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

.card,
.list-group-item,
.table,
.form-control {
  background-color: var(--surface-raised);
  color: var(--text);
  border-color: var(--border);
}

.card {
  border-radius: 8px;
}

.table {
  --bs-table-bg: var(--surface-raised);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-soft);
  --bs-table-striped-color: var(--text);
}

.form-control:focus {
  background-color: var(--surface-soft);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(79, 178, 134, 0.25);
}

.btn-primary {
  color: #07110c;
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn-primary:hover {
  color: #07110c;
  background-color: #7ad7ab;
  border-color: #7ad7ab;
}

.btn-outline-secondary {
  color: var(--text);
  border-color: var(--border);
}

.btn-outline-secondary:hover {
  background-color: var(--surface-soft);
  border-color: var(--muted);
}

.alert-warning {
  color: #ffdca8;
  background-color: #342817;
  border-color: #6f5527;
}

code {
  color: #f5c16c;
}