:root {
  --bs-primary: #0f4368;
  --bs-secondary: #5f8ea8;
  --bs-dark: #0f4368;
  --brand-cream-1: #fffbf3;
  --brand-cream-2: #ecb865;
  --brand-card: #fffdf7;
  --brand-border: #d8cdb8;
}

body {
  background: linear-gradient(120deg, var(--brand-cream-1) 0%, var(--brand-cream-2) 100%);
  color: #1d2f3a;
}

.navbar-brand {
  letter-spacing: 0.2px;
  font-weight: 700;
}

.bg-brand {
  background: linear-gradient(90deg, #88bbcc 0%, #2d6c8f 55%, #0f4368 100%) !important;
}

.card.brand-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  box-shadow: 0 10px 24px rgba(15, 67, 104, 0.12);
}

.navbar-logo {
  height: 49px;
  width: auto;
}

.form-control,
.form-select {
  border-color: #bfcfd8;
}

.form-control:focus,
.form-select:focus {
  border-color: #0f4368;
  box-shadow: 0 0 0 0.2rem rgba(15, 67, 104, 0.2);
}

pre.code-block {
  background: #111;
  color: #9ef0a8;
  padding: 0.9rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.kpi-card {
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  height: 100%;
}

.kpi-icon {
  font-size: 1.35rem;
  color: var(--bs-primary);
}

.kpi-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}

.small-muted {
  color: #486172;
}