:root {
  --hh-primary: #60A5FA;
  --hh-primary-hover: #3B82F6;
  --hh-primary-active: #2563EB;
  --hh-secondary: #10B981;
  --hh-secondary-hover: #059669;
  --hh-background: #111827;
  --hh-surface: #1F2933;
  --hh-card: #374151;
  --hh-text: #F9FAFB;
  --hh-text-secondary: #D1D5DB;
  --hh-text-muted: #9CA3AF;
  --hh-border: #374151;
  --hh-divider: #4B5563;
  --hh-gradient: linear-gradient(135deg, #60A5FA 0%, #10B981 100%);
  --hh-danger-bg: #4B1F2A;
  --hh-danger-text: #FCA5A5;
  --bs-body-bg: var(--hh-background);
  --bs-body-color: var(--hh-text);
  --bs-tertiary-bg: var(--hh-surface);
  --bs-border-color: var(--hh-border);
  --bs-secondary-color: var(--hh-text-muted);
  --bs-card-bg: var(--hh-surface);
  --bs-list-group-bg: var(--hh-surface);
  --bs-list-group-color: var(--hh-text);
  --bs-list-group-border-color: var(--hh-border);
  --bs-link-color: var(--hh-primary);
  --bs-link-hover-color: var(--hh-primary-hover);
  color-scheme: dark;
}

[data-theme='light'] {
  --hh-primary: #2563EB;
  --hh-primary-hover: #1D4ED8;
  --hh-primary-active: #1E40AF;
  --hh-secondary: #059669;
  --hh-secondary-hover: #047857;
  --hh-background: #F3F7FB;
  --hh-surface: #FFFFFF;
  --hh-card: #E8F0FA;
  --hh-text: #111827;
  --hh-text-secondary: #374151;
  --hh-text-muted: #6B7280;
  --hh-border: #CBD5E1;
  --hh-divider: #CBD5E1;
  --hh-danger-bg: #FEE2E2;
  --hh-danger-text: #B91C1C;
  --bs-body-bg: var(--hh-background);
  --bs-body-color: var(--hh-text);
  --bs-tertiary-bg: var(--hh-card);
  --bs-border-color: var(--hh-border);
  --bs-secondary-color: var(--hh-text-muted);
  --bs-card-bg: var(--hh-surface);
  --bs-list-group-bg: var(--hh-surface);
  --bs-list-group-color: var(--hh-text);
  --bs-list-group-border-color: var(--hh-border);
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 32%),
    linear-gradient(180deg, var(--hh-background) 0%, #0B1220 100%);
  color: var(--hh-text);
}

[data-theme='light'] body {
  background:
    radial-gradient(circle at top, rgba(96, 165, 250, 0.12), transparent 30%),
    linear-gradient(180deg, #F8FBFF 0%, var(--hh-background) 100%);
}

.brand-navbar {
  --bs-navbar-color: var(--hh-text-muted);
  --bs-navbar-hover-color: var(--hh-primary);
  --bs-navbar-active-color: var(--hh-text);
  background-color: rgba(31, 41, 51, 0.92);
  border-bottom: 1px solid var(--hh-border);
  backdrop-filter: blur(12px);
}

[data-theme='light'] .brand-navbar {
  --bs-navbar-active-color: var(--hh-primary);
  background-color: rgba(255, 255, 255, 0.92);
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

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

.nav-link.active,
.nav-link:hover {
  color: var(--hh-primary);
}

.navbar-toggler {
  border-color: var(--hh-border);
}

.navbar-toggler-icon {
  filter: invert(0.92);
}

[data-theme='light'] .navbar-toggler-icon {
  filter: invert(0.28);
}

.theme-toggle {
  background-color: transparent;
  color: var(--hh-text);
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.theme-toggle:hover {
  border-color: var(--hh-primary);
  color: var(--hh-primary);
}

.btn-success,
.btn-primary {
  --bs-btn-bg: var(--hh-secondary);
  --bs-btn-border-color: var(--hh-secondary);
  --bs-btn-hover-bg: var(--hh-secondary-hover);
  --bs-btn-hover-border-color: var(--hh-secondary-hover);
  --bs-btn-active-bg: var(--hh-secondary-hover);
  --bs-btn-active-border-color: var(--hh-secondary-hover);
  --bs-btn-color: #FFFFFF;
}

.btn-dark,
.btn-outline-dark {
  --bs-btn-bg: var(--hh-primary);
  --bs-btn-border-color: var(--hh-primary);
  --bs-btn-hover-bg: var(--hh-primary-hover);
  --bs-btn-hover-border-color: var(--hh-primary-hover);
  --bs-btn-active-bg: var(--hh-primary-active);
  --bs-btn-active-border-color: var(--hh-primary-active);
  --bs-btn-color: #FFFFFF;
}

.btn-outline-secondary {
  --bs-btn-color: var(--hh-text);
  --bs-btn-border-color: var(--hh-border);
  --bs-btn-hover-bg: var(--hh-card);
  --bs-btn-hover-border-color: var(--hh-primary);
  --bs-btn-hover-color: var(--hh-primary);
}

.badge.text-bg-success {
  --bs-success-rgb: 16, 185, 129;
}

.card,
.list-group-item,
.brand-shell {
  border: 1px solid var(--hh-border);
  background-color: var(--hh-surface);
  color: var(--hh-text);
}

.bg-body-tertiary {
  background-color: var(--hh-card) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--hh-card);
  color: var(--hh-text);
}

.text-dark,
.fw-semibold.text-dark {
  color: var(--hh-text) !important;
}

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

.border-top,
hr {
  border-color: var(--hh-divider) !important;
}

.alert-info {
  --bs-alert-color: var(--hh-text);
  --bs-alert-bg: rgba(96, 165, 250, 0.12);
  --bs-alert-border-color: rgba(96, 165, 250, 0.28);
}

.alert-warning {
  --bs-alert-color: var(--hh-text);
  --bs-alert-bg: rgba(16, 185, 129, 0.12);
  --bs-alert-border-color: rgba(16, 185, 129, 0.28);
}

.form-control,
.form-select {
  background-color: var(--hh-surface);
  color: var(--hh-text);
  border-color: var(--hh-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--hh-surface);
  color: var(--hh-text);
  border-color: var(--hh-primary);
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18);
}

.form-control::placeholder {
  color: var(--hh-text-muted);
}