:root {
  color-scheme: dark;
  --brand: #7cc6ff;
  --bg: #121212;
  --bg-elevated: #1b1b1b;
  --bg-soft: #202020;
  --panel: #1f1f1f;
  --panel-strong: #2b2b2b;
  --border: rgba(255,255,255,0.12);
  --text: #f5f5f5;
  --muted: #c7c7c7;
  --heading: #ffffff;
  --shadow: rgba(0,0,0,0.35);
  --link: #9cc9ff;
  --btn-primary-bg: #5ea8ff;
  --btn-primary-text: #06131f;
  --btn-primary-hover: #86c2ff;
}

:root[data-bs-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-elevated: #ffffff;
  --bg-soft: #eef2f7;
  --panel: #ffffff;
  --panel-strong: #f4f6fb;
  --border: rgba(15,23,42,0.12);
  --text: #1d2939;
  --muted: #5c6977;
  --heading: #111827;
  --shadow: rgba(15,23,42,0.08);
  --link: #0d6efd;
  --btn-primary-bg: #0d6efd;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #0b5ed7;
}

html, body {
  background: var(--bg);
  color: var(--text);
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

header.bg-light,
.bg-light {
  background-color: var(--bg-elevated) !important;
}

.logo-placeholder {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 6px;
}

.qr-wrap {
  max-width: 160px;
}

.qr-wrap img {
  border: 1px solid var(--border);
  background: var(--panel-strong);
}

.service-badge {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: rgba(124, 198, 255, 0.18) !important;
  border: 1px solid rgba(124, 198, 255, 0.35);
  color: var(--heading) !important;
}

header .text-muted,
main .text-muted,
small.text-muted,
.lead.text-muted,
.card-text,
.card-subtitle,
.text-muted {
  color: var(--muted) !important;
}

.card,
.card-body,
.card-footer {
  background: var(--panel) !important;
  color: var(--text) !important;
}

.card {
  border-color: var(--border) !important;
  box-shadow: 0 0.75rem 2rem var(--shadow) !important;
}

.card-footer {
  border-top-color: var(--border) !important;
}

.card-title,
.card h5,
.card h3,
.card h4,
.card h2,
.card-header {
  color: var(--heading) !important;
}

.form-control,
.input-group-text {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.form-control::placeholder {
  color: var(--muted) !important;
}

.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-text) !important;
}

.btn-outline-primary {
  color: var(--link) !important;
  border-color: rgba(124, 198, 255, 0.75) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: rgba(124, 198, 255, 0.12) !important;
  border-color: rgba(124, 198, 255, 0.75) !important;
  color: var(--heading) !important;
}

.btn-outline-secondary {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--bg-soft) !important;
  color: var(--heading) !important;
  border-color: var(--border) !important;
}

#services-container .card .stretched-link,
#services-container .card a {
  color: var(--link) !important;
}

footer {
  background: #0b0b0b !important;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .card-body {
    flex-direction: column;
  }
}