@mixin lightmodeColors {
    --hy-font-color-white: white;
    --hy-font-color-black: hsl(210, 29%, 24%);
    --hy-font-color-gray: hsl(208, 7%, 46%);

    --hy-font-color-contrast: var(--hy-font-color-black); // Default in light theme => "Contrast" to the background color
    --hy-font-color-match: var(--hy-font-color-white);

    // General
    --hy-body-bg-color: hsl(240, 13%, 94%);
    --hy-loader-ring-bg-color: hsl(0, 0%, 87%);

    // Theme Colors
    // NOTE: colors are defined by brand theme
    --hy-color-gray-1: hsl(210, 14%, 89%);
    --hy-color-gray-2: hsl(210, 16%, 93%);
    --hy-color-gray-3: hsl(210, 17%, 97.5%);

    // Sections: Colors
    --hy-section-shadow-color: hsla(0, 0%, 41%, 0.1);
    --hy-section-bg-color: white;

    // Element: Others
    --hy-element-shadow-color: hsla(0, 0%, 72%, 0.33);
    --hy-element-border-secondary-color: hsl(231, 9%, 84%);
    --hy-section-divider-color: hsl(0, 0%, 88%);
    --hy-gray-tabbar-bg-color: hsl(210, 17%, 96%);
    --hy-gray-tabbar-ghost-color: var(--hy-section-bg-color);

    // Variants: colors for "primary" variant
    --hy-variant-primary-bg-color: var(--hy-accent-color); // TODO: is this needed?
    --hy-variant-primary-hover-color: var(--hy-accent-hover-color);

    // Variants: colors for "secondary" variant
    --hy-variant-secondary-font-color: var(--hy-font-color-contrast);
    --hy-variant-secondary-bg-color: var(--hy-section-bg-color);
    --hy-variant-secondary-hover-color: hsl(0, 0%, 96%);
    --hy-variant-secondary-border-color: var(--hy-element-border-secondary-color);
    --hy-variant-secondary-border-color-pressed: var(--hy-accent-color);

    // Variants: colors for "ghost" and "ghost-bg" variant
    --hy-variant-ghost-font-color: var(--hy-font-color-contrast);
    --hy-variant-ghost-bg-color: hsla(230, 11%, 85%, 0.145);
    --hy-variant-ghost-hover-color: hsla(230, 11%, 72%, 0.145);
    --hy-variant-ghost-border-color: var(--hy-accent-color);

    // Invalid / error states
    --hy-invalid-bg-color: hsla(0, 75%, 49%, 0.216);
    --hy-invalid-font-color: hsl(340, 82%, 49%);

    // Modal
    --hy-modal-bg-color: var(--hy-section-bg-color);
    --hy-modal-cover-color-mobile: hsla(0, 0%, 26%, 0.6);
    --hy-modal-cover-color-desktop: hsla(0, 0%, 100%, 0.5);
    --hy-modal-shadow-color: hsla(0, 0%, 37%, 0.4);

    // Popover
    --hy-popover-shadow-color: hsla(0, 0%, 41%, 0.17);
    --hy-popover-bg-color-match: var(--hy-section-bg-color);
    --hy-popover-bg-color-contrast: hsl(220, 5%, 13%); // Darkmode section-bg-color
    --hy-popover-border-color-match: var(--hy-color-gray-1);
    --hy-popover-border-color-contrast: hsl(210, 9%, 31%); // Darkmode color-gray-1

    // Navigation
    --hy-tabbar-shadow-color: hsla(0, 0%, 81%, 0.56);
    --hy-sidebar-shadow-color: var(--hy-tabbar-shadow-color);
}