:root {
            --primary-color: #E53935;
            --primary-hover-color: #C62828;
            --tag-filter-selected-bg: #007bff; /* Blue for include */
            --tag-filter-selected-text: #ffffff;
            --menu-item-hover-bg-light: #007bff;
            --menu-item-hover-text-light: #ffffff;

            --bg-color: #f4f7f6;
            --card-bg-color: #ffffff;
            --text-color: #333333;
            --text-muted-color: #777777;
            --border-color: #dddddd;
            --shadow-color: rgba(0, 0, 0, 0.1);

            --header-bg: var(--primary-color);
            --header-text-color: #FFFFFF;
            --header-icon-color: #FFFFFF;
            --header-icon-hover-color: #f0f0f0;

            --icon-color: #555555;
            --icon-hover-color: #000000;
            --menu-icon-color: #555555;

            --new-indicator-bg: #ffc107;
            --new-indicator-text: #333;
            --favorite-color: var(--primary-color);
            --dimmed-opacity: 0.5;

            --tile-title-font-size: 1.15rem;
            --tile-title-line-height: 1.3em;
            --tile-title-lines: 2;

            --tile-tag-font-size: 0.75rem;
            --tile-tag-line-height: 1.4em;
            --tile-tag-lines: 2;

            --grid-header-color: var(--text-color);
            --header-height: 60px;
        }

        body.dark-mode {
            --bg-color: #1e1e1e;
            --card-bg-color: #2c2c2c;
            --text-color: #e0e0e0;
            --text-muted-color: #aaaaaa;
            --border-color: #444444;
            --shadow-color: rgba(0, 0, 0, 0.3);

            --icon-color: #bbbbbb;
            --icon-hover-color: #ffffff;
            --menu-icon-color: #bbbbbb;
            --new-indicator-bg: #ffab00;
            --dimmed-opacity: 0.4;
            --tag-filter-selected-bg: #0056b3; /* Darker blue for include in dark mode */
            --grid-header-color: var(--text-color);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            transition: background-color 0.3s, color 0.3s;
            padding-top: var(--header-height);
        }

        .app-footer {
            text-align: center;
            padding: 1rem;
            font-size: 0.8rem;
            color: var(--text-muted-color);
            background-color: var(--bg-color);
            border-top: 1px solid var(--border-color);
        }