:root {

    /* ==========================================
      ACCENT
    ========================================== */

    --accent-light: #8B22DE;
    --accent-dark: #A237FF;

    --accent-hover: #BB73FF;

    --active-color: #B660FF;


    /* =========================
       BACKGROUND
    ========================= */

    --light-background: #FDFDFF;
    --dark-background: #0F0C13;

    /* =========================
       COMPONENTS
    ========================= */

    --light-component-1: #F5F3F8;
    --dark-component-1: #1B181F;

    --light-component-2: #DEDEDE;
    --dark-component-2: #211E25;

    --light-component-3: #E0DDE4;
    --dark-component-3: #3A393E;

    /* =========================
       HOVER
    ========================= */

    --light-hover: rgba(0, 0, 0, 0.08);
    --dark-hover: rgba(255, 255, 255, 0.08);

    --light-button-border: rgba(0, 0, 0, 0.20);
    --dark-button-border: rgba(255, 255, 255, 0.20);

    --navbar-light-hover: #EFEDF2;
    --navbar-dark-hover: #201D24;

    /* =========================
       TEXT
    ========================= */

    --text-dark-70: hsla(0, 0%, 100%, 0.7);
    --text-light-70: rgba(0, 0, 0, 0.7);
    --text-dark-60: rgba(255, 255, 255, 0.6);
    --text-light-60: rgba(0, 0, 0, 0.6);

    --text-dark-50: rgba(255, 255, 255, 0.5);
    --text-light-50: rgba(0, 0, 0, 0.5);

    /* =========================
       NAVBAR
    ========================= */

    --navbar-selected-background-dark: #39284C;
    --navbar-selected-background-light: #E9D5FA;

    /* =========================
       SEPARATORS
    ========================= */

    --separator-light: #E0DDE4;
    --separator-dark: #3B3A40;

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

    --green-dark: #00B13D;
    --red-dark: #EF443A;
    --yellow-dark: #F4B740;

    --green-light: #11c04e;
    --red-light: #df261c;
    --yellow-light: #eb9f07;

    /* Offers card Black */

    --free-background-dark: #131753;
    --free-bar-dark: #0F34C7;

    --premium-background-dark: #31124E;
    --premium-bar-dark: #A237FF;

    --duo-background-dark: #2E4C4A;
    --duo-bar-dark: #9AF8F3;

    --family-background-dark: #461C10;
    --family-bar-dark: #FF683D;

    /* Offers card Light */

    --free-background-light: #bfc1ec;
    --free-bar-light: #071b6d;

    --premium-background-light: #e4cbf5;
    --premium-bar-light: #A744FF;

    --duo-background-light: #c2e4e1;
    --duo-bar-light: #198d87;

    --family-background-light: #f0c6bb;
    --family-bar-light: #bd330d;

    /* ==========================================
      BUTTONS
    ========================================== */

    /* Dark */

    --button-dark-background: #A237FF;
    --button-dark-hover: #b35ffd;
    --button-dark-text: #FFFFFF;
    --button-dark-hover-text: #400a86;

    --card-background-dark: #FFFFFF;

    --button-secondary-fill-dark: #FFFFFF;
    --button-secondary-fill-dark-hover: #ffffffde;
    --button-secondary-fill-text-dark: #000000;

    /* Light */

    --button-light-background: #8B22DE;
    --button-light-hover: #982ff3;
    --button-light-text: #000000;
    --button-light-hover-text: #ffffff;

    --card-background-light: #000000ef;

    --button-secondary-fill-light: #000000;
    --button-secondary-fill-light-hover: #000000de;
    --button-secondary-fill-text-light: #FFFFFF;

}