.theme-light {
    --background-primary: var(--gray-light-7);                 //  Note background
    --background-primary-alt: var(--gray-light-5);             //  Note title background

    --background-secondary: var(--gray-light-3);               //  Sidebar background
    --background-secondary-alt: var(--gray-light-4);           //  Sidebar title background

    --background-modifier-hover: rgba(0, 0, 0, 0.075);
    --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);

    --background-modifier-border: var(--gray-light-1);         //  Border outline of quotes, tables, line breaks
    --background-modifier-border-hover: var(--gray-light-2);
    --background-modifier-border-focus: var(--gray);

    --background-modifier-error-rgb: var(--red-4-rgb);           //  Ctrl F Search Background
    --background-modifier-error: var(--red-4);           //  with text-on-accent / Delete Screen Button
    --background-modifier-error-hover: var(--red-3);

    --background-modifier-success-rgb: var(--green-4-rgb);     // Publish Upload Success Background
    --background-modifier-success:     var(--green-4);         // Publish Upload Success Background

    --background-modifier-warning: var(--yellow-3);            //  Warning Background
    --background-modifier-warning-hover: var(--yellow-4);

    --background-modifier-info: var(--blue-4);

    --modifier-text: white;
    --modifier-text-accent: var(--gray-light-7);

    // button.mod-warning,
    // .message.mod-warning {
    //   --modifier-text: var(--gray-dark-6);
    //   --modifier-text-accent: var(--gray-dark-5);
    // }

    // always light text (tooltip)
    --background-modifier-message: rgba(0, 0, 0, 0.9);

    --background-modifier-form-field: var(--background-primary);
    --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); // Search Bar Active Highlight

    --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
    --background-modifier-cover: rgba(220, 220, 220, 0.4);

    --text-normal: var(--gray-dark-5);                        // Text body of note
    --text-muted: var(--gray-dark-4);                         // Text darker for sidebar, toggles, inactive, tags, etc
    --text-faint: var(--gray-dark-1);                         // Link brackets color

    --text-accent: var(--primary-accent-4);                   // Links
    --text-accent-hover: var(--primary-accent-5);

    --text-success: var(--green-4);
    --text-error: var(--red-4);

    --text-highlight-fg: var(--gray-dark-7);
    --text-highlight-bg-rgb: var(--primary-accent-4-rgb);
    --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.2);
    --text-selection: rgba(var(--secondary-accent-4-rgb), 0.2);

    --interactive-hover: var(--primary-accent-1);         // Button hover text; pin
    --interactive-normal: var(--background-primary-alt);

    // Text on accent should work as foreground for all interactive accent elements
    --text-on-accent: var(--gray-light-8);                // Program Title bar text
    --interactive-accent: var(--primary-accent-4);      // Workspace Note Title Underline
    --interactive-accent-hover: var(--primary-accent-3);  // Menu Button Hover
    --interactive-toggle: var(--secondary-accent-3);
    --interactive-disabled: var(--gray-light-3);

    // Color Spectrum
    --color-red-rgb: var(--red-4-rgb);
    --color-red: var(--red-4);
    --color-orange-rgb: var(--orange-4-rgb);
    --color-orange: var(--orange-4);
    --color-yellow-rgb: var(--yellow-3-rgb);
    --color-yellow: var(--yellow-3);
    --color-green-rgb: var(--green-4-rgb);
    --color-green: var(--green-4);
    --color-cyan-rgb: var(--cyan-4-rgb);
    --color-cyan: var(--cyan-4);
    --color-blue-rgb: var(--blue-4-rgb);
    --color-blue: var(--blue-4);
    --color-purple-rgb: var(--purple-4-rgb);
    --color-purple: var(--purple-4);
    --color-pink-rgb: var(--pink-4-rgb);
    --color-pink: var(--pink-4);

    --color-base-00: var(--gray-light-8);
    --color-base-05: var(--gray-light-7);
    --color-base-10: var(--gray-light-6);
    --color-base-20: var(--gray-light-5);
    --color-base-25: var(--gray-light-3);
    --color-base-30: var(--gray-light-2);
    --color-base-35: var(--gray-light-1);
    --color-base-40: var(--gray);
    --color-base-50: var(--gray-dark-1);
    --color-base-60: var(--gray-dark-3);
    --color-base-70: var(--gray-dark-4);
    --color-base-100: var(--gray-dark-8);

    // Fixes weird notice that has a black background
    .notice {
        background-color: var(--background-modifier-form-field);
        color: var(--text-normal);
    }

    @media (hover: hover) {
        button.mod-cta:hover,
        button.mod-destructive:hover {
            --modifier-text: var(--gray-dark-8);
            color: var(--modifier-text);
        }
    }
}
