html[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-color: #b0b6c2;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #1c232c;
    --bs-body-color: #e7ebf3;
    --bs-border-color: #2f3946;
    --bs-heading-color: #f3f5f8;
    --bs-link-color: #8ab4ff;
    --bs-link-hover-color: #a8c6ff;

    --bs-primary: #2d6cdf;
    --bs-primary-rgb: 45, 108, 223;

    --bs-card-bg: #2a313d;
    --bs-card-border-color: #3a4352;

    --input-bg: #1f2733;
    --input-fg: #e7ebf3;
    --input-border: #2e3a4a;
    --input-focus: #7aa2ff;
}

/* ==== Layout basics ==== */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Brand logo in navbar */
.navbar-brand img {
    height: 40px;
    width: auto;
}

/* Dark navbars:
   Top header uses bg-primary (custom grey),
   Menu bar uses bg-secondary (slightly lighter/different grey) */
.navbar {
    --bs-navbar-color: rgba(255, 255, 255, .85);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

/* Keep buttons blue while bars stay grey */
.navbar.bg-primary {
    --bs-primary: #1E252E;
    /* dark grey bar */
    --bs-primary-rgb: 30, 37, 46;
}

.navbar.bg-secondary {
    --bs-secondary: #3a4452;
    /* second bar tone */
    --bs-secondary-rgb: 58, 68, 82;
}

.card {
    --bs-card-bg: #2a313d;
    --bs-card-border-color: #3a4352;
    border-radius: .75rem;
}

.card .btn {
    border-radius: .5rem;
}

.card .btn-outline-secondary {
    --bs-btn-color: #cfd6e3;
    --bs-btn-border-color: #566173;
    --bs-btn-hover-bg: #566173;
    --bs-btn-hover-border-color: #566173;
    --bs-btn-hover-color: #fff;
}

/* ==== Forms ==== */
.form-label {
    font-weight: 600;
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--input-fg);
    border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--input-fg);
    border-color: var(--input-focus);
    box-shadow: 0 0 0 .25rem rgba(122, 162, 255, .25);
}

.form-control::placeholder {
    opacity: .7;
}

/* Material Icons helper (if you use them) */
.material-icons.md-18 {
    font-size: 18px;
    line-height: 1;
}