:root {
    --bg-color: rgba(0, 0, 0, 0);
    --branding-primary: #178CE0;
    --branding-primary-light: #33AAFF;
    --branding-primary-dark: #1973B6;
    --branding-danger: #D6242A;
    --branding-danger-emphasis: #A11212;
    --branding-info: #18F0E9;
    --branding-info-emphasis: #0AC2BC;
    --branding-secondary: #F9B718;
    --branding-secondary-light: #FFC742;
    --branding-secondary-dark: #AC7A00;
    --branding-gray: #686868;
    --branding-gray-dark: #3B3B3B;
    --branding-primary-rgb: 23, 140, 224;
    --branding-primary-light-rgb: 51, 170, 255;
    --branding-primary-dark-rgb: 25, 115, 182;
    --branding-danger-rgb: 214, 36, 42;
    --branding-danger-emphasis-rgb: 161, 18, 18;
    --branding-info-rgb: 24, 240, 233;
    --branding-info-emphasis-rgb: 10, 194, 188;
    --branding-secondary-rgb: 249, 183, 24;
    --branding-secondary-light-rgb: 255, 199, 66;
    --branding-secondary-dark-rgb: 172, 122, 0;
    --branding-gray-rgb: 104, 104, 104;
    --branding-gray-dark-rgb: 59, 59, 59;
    /* Default (Light) Mappings */
    --card-bg: #ffffff;
    --card-border: #f0f0f0;
    --input-bg: #f8f9fa;
    --input-border: #e9ecef;
    --text-muted-custom: #6c757d;
    --section-bg: #f8f9fa;
}

[data-bs-theme="dark"] {
    /* Dark Mode Overrides */
    --bs-body-bg: #0f172a; /* Slate 900 */
    --bs-body-color: #f8fafc; /* Slate 50 */
    --card-bg: #1e293b; /* Slate 800 */
    --card-border: #334155; /* Slate 700 */
    --input-bg: #0f172a;
    --input-border: #334155;
    --text-muted-custom: #94a3b8; /* Slate 400 */
    --section-bg: #1e293b;
    /* Adjust branding for dark mode contrast */
    --branding-primary: #38bdf8; /* Sky 400 */
    --branding-primary-dark: #0ea5e9; /* Sky 500 */
    --branding-primary-dark-rgb: 14, 165, 233; /* Sky 500 */
    --branding-primary-rgb: 56, 189, 248;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding-bottom: 80px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-custom {
    background-color: var(--branding-primary-dark);
    padding-bottom: 1rem;
}

.directory-menu {
    color: var(--branding-secondary-light);
}

/* Common Card Styles using Variables */
.member-card, .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.form-control-lg-custom {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--bs-body-color) !important;
}

.form-control-lg-custom:focus {
    background-color: var(--card-bg) !important;
    border-color: var(--branding-primary) !important;
    color: var(--bs-body-color) !important;
}