:root {
    --grey-almost-black: #1d1d1d;
    --grey-darkest: #2a2a2a;
    --grey-dark: #3c3c3c;
    --grey-grey: #4b4b4b;
    --grey-light: #989898;
    --grey-lightest: #d7d7d7;
    --grey-almost-white: #f1f1f1;

    /*Primary:*/
    --primary-almost-black: rgb(4, 28, 51);
    --primary-darkest: rgb(9, 43, 117);
    --primary-dark: rgb(22, 55, 111);
    --primary-primary: rgb(12, 118, 203);
    --primary-light: rgb(53, 140, 188);
    --primary-lightest: rgb(104, 149, 226);
    --primary-almost-white: rgb(148, 190, 255);

    /*Dark-Primary:*/
    --dark-almost-black: #0b1621;
    --dark-darkest: #1c2135;
    --dark-dark: #2a2f42;
    --dark-primary: #404864;
    --dark-light: #545c7b;
    --dark-lightest: #6f779d;
    --dark-almost-white: #97a1d4;

    /*Secondary (Accent):*/
    --accent-almost-black: #75471f;
    --accent-darkest: #755821;
    --accent-dark: #9c6129;
    --accent-accent: #ca8a28;
    --accent-light: #b29e37;
    --accent-lightest: #e7e26a;
    --accent-almost-white: #e7e196;

    /*Reds (Alert/Destructive):*/
    --alert-almost-black: #41040f;
    --alert-darkest: #710825;
    --alert-dark: #ab082d;
    --alert-alert: rgba(244, 5, 82, 0.9);
    --alert-light: #ff597e;
    --alert-lightest: #ff8897;
    --alert-almost-white: #ffacae;

    /*Yellows (Warning):*/
    --warn-almost-black: #363500;
    --warn-darkest: #7d682d;
    --warn-dark: #b29e37;
    --warn-warn: #F4E04D;
    --warn-light: #f4f02b;
    --warn-lightest: #f4f26d;
    --warn-almost-white: #f4efa1;

    /*Greens (Success):*/
    --success-almost-black: #0b2018;
    --success-darkest: #316355;
    --success-dark: #39715f;
    --success-success: #368169;
    --success-light: #328876;
    --success-lightest: #69ae9d;
    --success-almost-white: #76aca3;


    /* Brand Colors */
    --brand-main : rgb(12, 118, 203);
}

.theme-light {
    /*Background */
    --main-background-color-solid: var(--grey-almost-white);
    --main-background-color-grade1: white;
    --main-background-color-grade2: var(--grey-lightest);
    --main-border-color: var(--grey-almost-black);
    --header-background-color: var(--primary-primary);
    --header-border-color: var(--primary-dark);

    --accented-background-color: var(--accent-almost-white);
    --accented-border-color: var(--accent-light);

    /*Text */
    --main-text-color: var(--grey-almost-black);
    --muted-text-color: var(--grey-light);

    /*Buttons */
    --button-text-color: var(--grey-darkest);
    --button-primary-text-color: var(--grey-darkest);
    --button-alert-text-color: var(--grey-darkest);

    --button-background-color: var(--primary-primary);
    --button-disabled-background-color: var(--primary-dark);
    --button-border-color: var(--primary-darkest);

    --button-primary-background-color: var(--success-dark);
    --button-primary-border-color: var(--success-success);

    --button-alert-background-color: var(--alert-almost-white);
    --button-alert-border-color: var(--alert-alert);

    /*Links*/
    --active-item-text-color: var(--grey-darkest);
    --hover-item-text-color: var(--grey-almost-black);
    --active-item-background-color: var(--primary-lightest);
    --hover-item-background-color: var(--accent-accent);
    --link-color: var(--accent-light);
    --link-visited-color: var(--accent-darkest);

    /*Menus */
    --menu-text-color: var(--grey-darkest);
    --menu-background-color: var(--primary-almost-white);

    /*Forms */
    --input-text-color: var(--grey-almost-black);
    --input-border-color: var(--grey-almost-black);
    --input-background-color: var(--grey-almost-white);
    --tooltip-background-color: var(--grey-lightest);

    /*Flash Messages */
    --message-success-background-color: var(--success-almost-white);
    --message-success-border-color: var(--success-success);
    --message-success-text-color: var(--grey-darkest);

    --message-warning-text-color: var(--grey-almost-white);
    --message-warning-background-color: var(--grey-almost-black);
    --message-warning-border-color: var(--warn-warn);

    --message-danger-text-color: var(--grey-almost-white);
    --message-danger-background-color: var(--grey-almost-black);
    --message-danger-border-color: var(--alert-alert);

    --message-info-text-color: var(--grey-almost-white);
    --message-info-background-color: var(--primary-almost-white);
    --message-info-border-color: var(--primary-primary);

    /* Scrollbar */
    --scrollbar-border-color: var(--accent-light);

}

.theme-dark {
   /*Background */
    --main-background-color-solid: var(--dark-dark);
    --main-background-color-grade1: var(--dark-light);
    --main-background-color-grade2: var(--dark-dark);
    --main-border-color: var(--grey-darkest);
    --header-background-color: var(--primary-primary);
    --header-border-color: var(--primary-dark);

    --accented-background-color: var(--accent-almost-white);
    --accented-border-color: var(--accent-light);

    /*Text */
    --main-text-color: var(--grey-almost-white);
    --muted-text-color: var(--grey-light);

    /*Buttons */
    --button-text-color: var(--grey-darkest);
    --button-primary-text-color: var(--grey-darkest);
    --button-alert-text-color: var(--grey-darkest);

    --button-background-color: var(--primary-primary);
    --button-disabled-background-color: var(--primary-dark);
    --button-border-color: var(--primary-darkest);

    --button-primary-background-color: var(--success-dark);
    --button-primary-border-color: var(--success-success);

    --button-alert-background-color: var(--alert-almost-white);
    --button-alert-border-color: var(--alert-alert);

    /*Links*/
    --active-item-text-color: var(--grey-darkest);
    --hover-item-text-color: var(--grey-almost-black);
    --active-item-background-color: var(--primary-lightest);
    --hover-item-background-color: var(--accent-accent);
    --link-color: var(--accent-light);
    --link-visited-color: var(--accent-darkest);

    /*Menus */
    --menu-text-color: var(--grey-darkest);
    --menu-background-color: var(--primary-almost-white);

    /*Forms */
    --input-text-color: var(--grey-almost-black);
    --input-border-color: var(--grey-almost-black);
    --input-background-color: var(--grey-almost-white);
    --tooltip-background-color: var(--grey-lightest);

    /*Flash Messages */
    --message-success-text-color: var(--grey-almost-black);
    --message-success-background-color: var(--success-almost-white);
    --message-success-border-color: var(--success-success);

    --message-warning-text-color: var(--grey-almost-black);
    --message-warning-background-color: var(--warn-almost-white);
    --message-warning-border-color: var(--warn-warn);

    --message-danger-text-color: var(--grey-almost-black);
    --message-danger-background-color: var(--alert-almost-white);
    --message-danger-border-color: var(--alert-alert);

    --message-info-text-color: var(--grey-almost-black);
    --message-info-background-color: var(--primary-almost-white);
    --message-info-border-color: var(--primary-primary);

    /* Scrollbar */
    --scrollbar-border-color: var(--accent-light);


}