/* ==========================================
   LIGHT THEME
========================================== */

@media (prefers-color-scheme: light) {

    :root {

        --background: var(--light-background);

        --component-1: var(--light-component-1);
        --component-2: var(--light-component-2);
        --component-3: var(--light-component-3);

        --accent: var(--accent-light);

        --hover: var(--light-hover);
        --border-button: var(--light-button-border);
        --navbar-hover: var(--navbar-light-hover);

        --separator: var(--separator-light);

        --text: #000000;
        --text-reverse: #FFFFFF;
        --text-70: var(--text-light-70);
        --text-60: var(--text-light-60);
        --text-50: var(--text-light-50);

        --button-background: var(--button-light-background);
        --button-hover: var(--button-light-hover);

        --button-text: var(--button-light-text);
        --button-hover-text: var(--button-light-hover-text);

        --button-secondary-fill: var(--button-secondary-fill-light);
        --button-secondary-fill-text: var(--button-secondary-fill-text-light);
        --button-secondary-fill-hover: var(--button-secondary-fill-light-hover);

        --card-background: var(--card-background-light);

        /* ==========================================
            STATUS COLORS
        ========================================== */

        --success: var(--green-light);
        --error: var(--red-light);
        --yellow: var(--yellow-light);

        /* ==========================================
            CARDS COLORS
        ========================================== */

        --free-background: var(--free-background-light);
        --free-bar: var(--free-bar-light);

        --premium-background: var(--premium-background-light);
        --premium-bar: var(--premium-bar-light);

        --duo-background: var(--duo-background-light);
        --duo-bar: var(--duo-bar-light);

        --family-background: var(--family-background-light);
        --family-bar: var(--family-bar-light);

    }

}