:root,
[data-bs-theme="light"] {
    --ct-primary: #4f735d;
    --ct-primary-rgb: 79, 115, 93;
    --ct-link-color: #456951;
    --ct-link-color-rgb: 69, 105, 81;
    --cm-primary: #4f735d;
    --cm-primary-hover: #3f604c;
    --cm-primary-soft: #e8f0ea;
    --cm-page-bg: #f2f5f2;
    --cm-surface: #ffffff;
    --cm-border: #dfe6e1;
    --cm-text: #29372e;
    --cm-muted: #59685f;
}

[data-bs-theme="dark"] {
    --ct-primary: #78a388;
    --ct-primary-rgb: 120, 163, 136;
    --ct-link-color: #91b69e;
    --ct-link-color-rgb: 145, 182, 158;
    --cm-primary: #5f8a6e;
    --cm-primary-hover: #70a080;
    --cm-primary-soft: #263a2d;
    --cm-page-bg: #172019;
    --cm-surface: #202b23;
    --cm-border: #334238;
    --cm-text: #e3ebe5;
    --cm-muted: #b5c2b9;
}

body,
.authentication-bg {
    background-color: var(--cm-page-bg);
    color: var(--cm-text);
}

.bg-primary {
    background-color: var(--cm-primary) !important;
}

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

.btn-primary {
    --ct-btn-bg: var(--cm-primary);
    --ct-btn-border-color: var(--cm-primary);
    --ct-btn-hover-bg: var(--cm-primary-hover);
    --ct-btn-hover-border-color: var(--cm-primary-hover);
    --ct-btn-active-bg: var(--cm-primary-hover);
    --ct-btn-active-border-color: var(--cm-primary-hover);
}

.bg-primary-subtle {
    background-color: var(--cm-primary-soft) !important;
}

.card,
.list-group-item,
.dropdown-menu {
    background-color: var(--cm-surface);
    border-color: var(--cm-border);
}

.card {
    box-shadow: 0 1px 3px rgba(38, 58, 45, .07);
}

.list-group-item.active {
    background-color: var(--cm-primary);
    border-color: var(--cm-primary);
    color: #fff;
}

.article-list .list-group-item:not(.active) .text-muted {
    color: var(--cm-muted) !important;
    font-weight: 500;
}

.article-list .list-group-item.active .text-muted {
    color: rgba(255, 255, 255, .84) !important;
    font-weight: 500;
}

.article-list .list-group-item.active .fw-semibold {
    color: #fff;
}

.form-control:focus {
    border-color: rgba(var(--ct-primary-rgb), .65);
    box-shadow: 0 0 0 .15rem rgba(var(--ct-primary-rgb), .16);
}

.alert-info {
    --ct-alert-color: var(--cm-primary-hover);
    --ct-alert-bg: var(--cm-primary-soft);
    --ct-alert-border-color: var(--cm-border);
}