body.dark-mode {
    /* ---- Backgrounds ---- */
    --bg-primary: #1A5F78;
    --bg-secondary: #154E63;
    /* ---- Navigation & Footer ---- */
    --nav-bar: #0CAEB1;
    --footer-bg: #0CAEB1;
    --footer-text: #FFFFFF;
    /* ---- Buttons ---- */
    --btn-primary: #617DC6;
    --btn-primary-hover: #5069AA;
    --btn-primary-text: #FFFFFF;
    --btn-secondary: #8CA1D7;
    --btn-secondary-hover: #788FC8;
    --btn-secondary-text: #FFFFFF;
    --btn-accept: #C3F796;
    --btn-accept-hover: #B2EB82;
    --btn-accept-text: #1A5F78;
    /* ---- Cards ---- */
    --card-primary: #FFFFFF;
    --card-secondary: #ADB5CC;
    --card-tertiary: #707A93;
    --card-primary-text: #1A5F78;
    --card-secondary-text: #111827;
    --card-tertiary-text: #FFFFFF;
    /* ---- Typography ---- */
    --heading-color: #FFFFFF;
    --text-primary: #FFFFFF;
    --text-secondary: #D9E4EC;
    --text-light: #FFFFFF;
    /* ---- Accents ---- */
    --accent-teal: #0CAEB1;
    --accent-dark-teal: #1A5F78;
    --accent-blue-purple: #617DC6;
    --accent-lavender: #8CA1D7;
    /* ---- Forms & Inputs ---- */
    --input-bg: #F3F4F6;
    --input-border: #D1D5DB;
    --input-focus-border: #0CAEB1;
    --input-text: #111827;
    --input-placeholder: #6B7280;
    /* ---- Borders & Shadows ---- */
    --border-color: rgba(255, 255, 255, 0.18);
    --border-primary: rgba(255, 255, 255, 0.22);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.22);
}

/* Optional shared dark helpers */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

    body.dark-mode .navbar,
    body.dark-mode .top-nav,
    body.dark-mode .footer {
        background-color: var(--nav-bar);
        color: var(--text-light);
    }

    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
        background-color: var(--input-bg);
        color: var(--input-text);
        border: 1px solid var(--input-border);
    }

        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder {
            color: var(--input-placeholder);
        }