html.light {
    /* ---------- Base ---------- */
    --bg-app: #e0e0e0;             /* Page background */
    --bg-body: #d6d6d6;            /* Main body background */
    --bg-section: #c8c8c8;         /* Sections background */

    --text-main: #1a1a1a;          /* Primary text */
    --text-muted: #555555;         /* Muted text */
    --text-soft: #777777;          /* Soft text */
    --text-link: #0056b3;          /* Links color */

    /* ---------- Containers ---------- */
    --bg-container: rgb(199, 206, 206);  /* Inner containers */
    --bg-days-item: rgba(200, 200, 200, 1);

    --bg-card: rgba(210, 210, 210, 1);          /* Card surface */
    --bg-card-footer: rgba(200, 200, 200, 0.7);

    --border-card: rgba(160, 160, 160, 0.5);
    --border-soft: rgba(180, 180, 180, 0.3);

    /* ---------- Buttons ---------- */
    --btn-bg: #c0c0c0;
    --btn-bg-hover: #b0b0b0;
    --btn-bg-active: #a8a8a8;
    --btn-text: #1a1a1a;

    /* ---------- Inputs / Dropdowns ---------- */
    --bg-input: #d0d0d0;
    --border-input: #b8b8b8;
    --text-input: #1a1a1a;
    --text-placeholder: #666666;

    --bg-option-hover: #bdbdbd;
    --text-option-hover: #1a1a1a;

    --search-bg: #d0d0d0;
    --search-text: #1a1a1a;

    /* ---------- Navbar ---------- */
    --bg-navbar: #cfcfcf;
    --text-navbar: #1a1a1a;
    --text-navbar-hover: #333333;

    /* ---------- Lists / Exercise ---------- */
    --bg-list: #dcdcdc;
    --bg-item: #cfcfcf;
    --text-item: #1a1a1a;

    --scroll-thumb: #999999;

    /* ---------- States ---------- */
    --hover-light: rgba(0,0,0,0.08);
    --border-today: #555555;
    --success-accent: #4caf50;  /* Keep green for success/accent */

    /* ---------- Navigation Arrows ---------- */
    --bg-nav-arrow: rgba(160, 160, 160, 0.8);
    --border-nav-arrow: rgba(200, 200, 200, 0.4);

    /* ---------- Effects ---------- */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.2);

    --scroll-track: #d0d0d0;

    --bg-bell: rgba(96, 148, 148, 0.89);
    --bg-bell-hover: rgb(162, 149, 149);

    --delimiter-color: rgba(83, 112, 112, 0.89);
}

@media (max-width: 880px) {
    html.light .background-section {
        /* Soft mesh gradient: Cream, sand, and a hint of warm latte */
        background: radial-gradient(at 0% 0%, rgba(245, 235, 224, 1) 0%, transparent 50%),
        radial-gradient(at 100% 0%, rgba(230, 215, 200, 0.6) 0%, transparent 50%),
        radial-gradient(at 50% 100%, rgba(255, 255, 255, 1) 0%, transparent 50%),
        #faf7f2;
        background-attachment: fixed;
    }
}

html.light .navbar-brand .logo {
    filter: invert(85%);
}

html.light .background-section {
    filter: invert(20%);
}

html.light .exercise-image {
    filter: invert(0%);
}

html.light .coffee-img{
    filter: invert(18%);
    border: none;
}