html.dark {
    /* ---------- Base ---------- */
    --bg-app: #121212;
    --bg-body: #111;
    --bg-section: rgb(45, 45, 45);

    --text-main: #ffffff;
    --text-muted: #efefef;
    --text-soft: #a29595;
    --text-link: rgb(172, 165, 185);

    /* ---------- Containers ---------- */
    --bg-container: rgba(74, 78, 78, 0.9);
    --bg-days-item: rgba(102, 102, 102);

    --bg-card: rgba(76, 76, 76, 1);
    --bg-card-footer: rgba(0, 0, 0, 0.15);

    --border-card: rgba(100, 100, 100, 0.3);
    --border-soft: rgba(255, 255, 255, 0.1);

    /* ---------- Buttons ---------- */
    --btn-bg: #2c343c;
    --btn-bg-hover: #454c56;
    --btn-bg-active: #484e55;
    --btn-text: whitesmoke;

    /* ---------- Inputs / Dropdowns ---------- */
    --bg-input: rgb(127, 135, 135);
    --border-input: rgb(127, 135, 135);
    --text-input: #000;
    --text-placeholder: #aaa;

    --bg-option-hover: #888;
    --text-option-hover: #ffffff;

    --search-bg: rgb(127, 135, 135);
    --search-text: #000;

    /* ---------- Navbar ---------- */
    --bg-navbar: rgba(11, 14, 19);
    --text-navbar: #ffffff;
    --text-navbar-hover: #ccc;

    /* ---------- Lists / Exercise ---------- */
    --bg-list: rgb(76, 76, 76);
    --bg-item: rgb(105, 105, 105);
    --text-item: #e6e6e6;

    --scroll-thumb: #5e5e5e;

    /* ---------- States ---------- */
    --hover-light: rgba(245, 245, 245, 0.14);
    --border-today: #ffffff;
    --success-accent: #4caf50;

    /* ---------- Navigation Arrows ---------- */
    --bg-nav-arrow: rgba(100, 100, 100, 0.8);
    --border-nav-arrow: rgba(255, 255, 255, 0.2);

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

    --scroll-track: #000;

    --bg-bell: rgb(162, 149, 149);
    --bg-bell-hover: rgba(245, 245, 245, 1);

    --delimiter-color: rgba(23, 224, 224, 0.89);
}

@media (max-width: 880px) {
    html.dark .background-section {
        background: radial-gradient(at 0% 0%, rgba(45, 45, 45, 1) 0%, transparent 50%),
        radial-gradient(at 100% 0%, rgba(76, 76, 76, 0.4) 0%, transparent 50%),
        radial-gradient(at 50% 100%, rgba(20, 20, 20, 1) 0%, transparent 50%),
        #121212; /* Fallback base color */
        background-attachment: fixed;
    }
}

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