/* ==========================================
   DARK THEME
========================================== */

:root {

    --background: var(--dark-background);

    --component-1: var(--dark-component-1);
    --component-2: var(--dark-component-2);
    --component-3: var(--dark-component-3);

    --accent: var(--accent-dark);

    --hover: var(--dark-hover);
    --border-button: var(--dark-button-border);
    --navbar-hover: var(--navbar-dark-hover);

    --separator: var(--separator-dark);

    --text: #FFFFFF;
    --text-reverse: #000000;
    --text-70: var(--text-dark-70);
    --text-60: var(--text-dark-60);
    --text-50: var(--text-dark-50);

    --button-background: var(--button-dark-background);
    --button-hover: var(--button-dark-hover);

    --button-text: var(--button-dark-text);
    --button-hover-text: var(--button-dark-hover-text);

    --button-secondary-fill: var(--button-secondary-fill-dark);
    --button-secondary-fill-text: var(--button-secondary-fill-text-dark);
    --button-secondary-fill-hover: var(--button-secondary-fill-dark-hover);

    --card-background: var(--card-background-dark);

    /* ==========================================
        STATUS COLORS
    ========================================== */

    --success: var(--green-dark);
    --error: var(--red-dark);
    --yellow: var(--yellow-dark);

    /* ==========================================
        CARDS COLORS
    ========================================== */

    --free-background: var(--free-background-dark);
    --free-bar: var(--free-bar-dark);

    --premium-background: var(--premium-background-dark);
    --premium-bar: var(--premium-bar-dark);

    --duo-background: var(--duo-background-dark);
    --duo-bar: var(--duo-bar-dark);

    --family-background: var(--family-background-dark);
    --family-bar: var(--family-bar-dark);

}