@import "tailwindcss";

:root {
    /* === Primary Brand Color === */
    --dark-primary: hsla(139, 79%, 13%, 1);
    --medium-primary: hsla(139, 59%, 37%, 1);
    --light-primary: hsla(139, 34%, 87%, 1);
    /* === Fixed Colors === */
    --fixed-dark: hsla(139, 79%, 13%, 1);
    --fixed-medium: hsla(139, 59%, 37%, 1);
    --fixed-light: hsla(139, 34%, 87%, 1);
    /* === Dark-to === */
    --dark-to-medium: hsla(139, 79%, 13%, 1);
    --dark-to-light: hsla(139, 79%, 13%, 1);
    --dark-to-white: hsla(139, 79%, 13%, 1);
    --dark-to-black: hsla(139, 79%, 13%, 1);
    --dark-to-dark1-gray: hsla(139, 79%, 13%, 1);
    --dark-to-dark2-gray: hsla(139, 79%, 13%, 1);
    --dark-to-dark3-gray: hsla(139, 79%, 13%, 1);
    --dark-to-medium1-gray: hsla(139, 79%, 13%, 1);
    --dark-to-medium2-gray: hsla(139, 79%, 13%, 1);
    --dark-to-medium3-gray: hsla(139, 79%, 13%, 1);
    --dark-to-light1-gray: hsla(139, 79%, 13%, 1);
    --dark-to-light2-gray: hsla(139, 79%, 13%, 1);
    --dark-to-light3-gray: hsla(139, 79%, 13%, 1);
    /* === Medium-to === */
    --medium-to-dark: hsla(139, 59%, 37%, 1);
    --medium-to-light: hsla(139, 59%, 37%, 1);
    --medium-to-white: hsla(139, 59%, 37%, 1);
    --medium-to-black: hsla(139, 59%, 37%, 1);
    --medium-to-dark1-gray: hsla(139, 59%, 37%, 1);
    --medium-to-dark2-gray: hsla(139, 59%, 37%, 1);
    --medium-to-dark3-gray: hsla(139, 59%, 37%, 1);
    --medium-to-medium1-gray: hsla(139, 59%, 37%, 1);
    --medium-to-medium2-gray: hsla(139, 59%, 37%, 1);
    --medium-to-medium3-gray: hsla(139, 59%, 37%, 1);
    --medium-to-light1-gray: hsla(139, 59%, 37%, 1);
    --medium-to-light2-gray: hsla(139, 59%, 37%, 1);
    --medium-to-light3-gray: hsla(139, 59%, 37%, 1);
    /* === Light-to === */
    --light-to-dark: hsla(139, 34%, 87%, 1);
    --light-to-medium: hsla(139, 34%, 87%, 1);
    --light-to-white: hsla(139, 34%, 87%, 1);
    --light-to-black: hsla(139, 34%, 87%, 1);
    --light-to-dark1-gray: hsla(139, 34%, 87%, 1);
    --light-to-dark2-gray: hsla(139, 34%, 87%, 1);
    --light-to-dark3-gray: hsla(139, 34%, 87%, 1);
    --light-to-medium1-gray: hsla(139, 34%, 87%, 1);
    --light-to-medium2-gray: hsla(139, 34%, 87%, 1);
    --light-to-medium3-gray: hsla(139, 34%, 87%, 1);
    --light-to-light1-gray: hsla(139, 34%, 87%, 1);
    --light-to-light2-gray: hsla(139, 34%, 87%, 1);
    --light-to-light3-gray: hsla(139, 34%, 87%, 1);
    /* === Black-to === */
    --black-to-white: black;
    --black-to-dark3-gray: black;
    /* === White-to === */
    --white-to-dark: white;
    --white-to-medium: white;
    --white-to-light: white;
    --white-to-dark1-gray: white;
    --white-to-dark2-gray: white;
    --white-to-dark3-gray: white;
    --white-to-medium1-gray: white;
    --white-to-medium2-gray: white;
    --white-to-medium3-gray: white;
    --white-to-light1-gray: white;
    --white-to-light2-gray: white;
    --white-to-light3-gray: white;
    /* === Gray Colors === */
    --dark1-gray: hsla(0, 0%, 18%, 1);
    --dark2-gray: hsla(0, 0%, 22%, 1);
    --dark3-gray: hsla(0, 0%, 26%, 1);
    --medium1-gray: hsla(0, 0%, 30%, 1);
    --medium2-gray: hsla(0, 0%, 40%, 1);
    --medium3-gray: hsla(0, 0%, 55%, 1);
    --light1-gray: hsla(0, 0%, 70%, 1);
    --light2-gray: hsla(0, 0%, 85%, 1);
    --light3-gray: hsla(0, 0%, 95%, 1);
    /* === Fixed Gray Colors === */
    --fixed-dark1-gray: hsla(0, 0%, 18%, 1);
    --fixed-dark2-gray: hsla(0, 0%, 22%, 1);
    --fixed-dark3-gray: hsla(0, 0%, 26%, 1);
    --fixed-medium1-gray: hsla(0, 0%, 30%, 1);
    --fixed-medium2-gray: hsla(0, 0%, 40%, 1);
    --fixed-medium3-gray: hsla(0, 0%, 55%, 1);
    --fixed-light1-gray: hsla(0, 0%, 70%, 1);
    --fixed-light2-gray: hsla(0, 0%, 85%, 1);
    --fixed-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Main Background === */
    --main-background: white;
    /* === State Colors === */
    --color-error: hsla(0, 70%, 50%, 1);
    --color-warning: hsla(40, 90%, 50%, 1);
    --color-success: hsla(139, 59%, 37%, 1);
    --color-info: hsla(210, 90%, 50%, 1);
    /* === Navbar === */
    --nav-bg: hsla(0, 0%, 0%, 1);
    --nav-bg2: hsla(0, 0%, 10%, 1);
    --nav-text: hsla(0, 0%, 100%, 1);
    --nav-link-hover: hsla(0, 0%, 25%, 1);
    --nav-drop-bg: hsla(0, 0%, 25%, 1);
    --nav-drop-bg2: hsla(0, 0%, 40%, 1);
    --nav-drop-hover: hsla(0, 0%, 7%, 1);
    --nav-drop-hover2: hsla(0, 0%, 15%, 1);
    --nav-logbt: hsla(140, 61%, 31%, 1);
    --nav-logbt-hover: hsla(139, 35%, 50%, 1);
    --nav-shadow: hsla(0, 0%, 85%, 1);
    /* === Sidebar === */
    --side-bg: hsl(0, 0%, 22%);
    --side-bg2: hsla(0, 0%, 0%, 1);
    --side-text: hsla(0, 0%, 0%, 1);
    --side-hover: hsla(0, 0%, 100%, 1);
    --side-icons: hsla(0, 0%, 100%, 1);
    --side-icons2: hsla(0, 0%, 38%, 1);
}

.dark {
    /* === Primary Brand Color === */
    --dark-primary: hsla(139, 34%, 87%, 1);
    --medium-primary: hsla(139, 59%, 37%, 1);
    --light-primary: hsla(139, 79%, 13%, 1);
    /* === Fixed Colors === */
    --fixed-dark: hsla(139, 79%, 13%, 1);
    --fixed-medium: hsla(139, 59%, 37%, 1);
    --fixed-light: hsla(139, 34%, 87%, 1);
    /* === Dark-to === */
    --dark-to-medium: hsla(139, 59%, 37%, 1);
    --dark-to-light: hsla(139, 34%, 87%, 1);
    --dark-to-white: white;
    --dark-to-black: black;
    --dark-to-dark1-gray: hsla(0, 0%, 18%, 1);
    --dark-to-dark2-gray: hsla(0, 0%, 22%, 1);
    --dark-to-dark3-gray: hsla(0, 0%, 26%, 1);
    --dark-to-medium1-gray: hsla(0, 0%, 30%, 1);
    --dark-to-medium2-gray: hsla(0, 0%, 40%, 1);
    --dark-to-medium3-gray: hsla(0, 0%, 55%, 1);
    --dark-to-light1-gray: hsla(0, 0%, 70%, 1);
    --dark-to-light2-gray: hsla(0, 0%, 85%, 1);
    --dark-to-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Medium-to === */
    --medium-to-dark: hsla(139, 79%, 13%, 1);
    --medium-to-light: hsla(139, 34%, 87%, 1);
    --medium-to-white: white;
    --medium-to-black: black;
    --medium-to-dark1-gray: hsla(0, 0%, 18%, 1);
    --medium-to-dark2-gray: hsla(0, 0%, 22%, 1);
    --medium-to-dark3-gray: hsla(0, 0%, 26%, 1);
    --medium-to-medium1-gray: hsla(0, 0%, 30%, 1);
    --medium-to-medium2-gray: hsla(0, 0%, 40%, 1);
    --medium-to-medium3-gray: hsla(0, 0%, 55%, 1);
    --medium-to-light1-gray: hsla(0, 0%, 70%, 1);
    --medium-to-light2-gray: hsla(0, 0%, 85%, 1);
    --medium-to-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Light-to === */
    --light-to-dark: hsla(139, 79%, 13%, 1);
    --light-to-medium: hsla(139, 59%, 37%, 1);
    --light-to-white: white;
    --light-to-black: black;
    --light-to-dark1-gray: hsla(0, 0%, 18%, 1);
    --light-to-dark2-gray: hsla(0, 0%, 22%, 1);
    --light-to-dark3-gray: hsla(0, 0%, 26%, 1);
    --light-to-medium1-gray: hsla(0, 0%, 30%, 1);
    --light-to-medium2-gray: hsla(0, 0%, 40%, 1);
    --light-to-medium3-gray: hsla(0, 0%, 55%, 1);
    --light-to-light1-gray: hsla(0, 0%, 70%, 1);
    --light-to-light2-gray: hsla(0, 0%, 85%, 1);
    --light-to-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Fixed Gray Colors === */
    --fixed-dark1-gray: hsla(0, 0%, 18%, 1);
    --fixed-dark2-gray: hsla(0, 0%, 22%, 1);
    --fixed-dark3-gray: hsla(0, 0%, 26%, 1);
    --fixed-medium1-gray: hsla(0, 0%, 30%, 1);
    --fixed-medium2-gray: hsla(0, 0%, 40%, 1);
    --fixed-medium3-gray: hsla(0, 0%, 55%, 1);
    --fixed-light1-gray: hsla(0, 0%, 70%, 1);
    --fixed-light2-gray: hsla(0, 0%, 85%, 1);
    --fixed-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Black-to === */
    --black-to-white: white;
    --black-to-dark3-gray: hsla(0, 0%, 26%, 1);
    /* === White-to === */
    --white-to-dark: hsla(139, 79%, 13%, 1);
    --white-to-medium: hsla(139, 59%, 37%, 1);
    --white-to-light: hsla(139, 34%, 87%, 1);
    --white-to-dark1-gray: hsla(0, 0%, 18%, 1);
    --white-to-dark2-gray: hsla(0, 0%, 22%, 1);
    --white-to-dark3-gray: hsla(0, 0%, 26%, 1);
    --white-to-medium1-gray: hsla(0, 0%, 30%, 1);
    --white-to-medium2-gray: hsla(0, 0%, 40%, 1);
    --white-to-medium3-gray: hsla(0, 0%, 55%, 1);
    --white-to-light1-gray: hsla(0, 0%, 70%, 1);
    --white-to-light2-gray: hsla(0, 0%, 85%, 1);
    --white-to-light3-gray: hsla(0, 0%, 95%, 1);
    /* === Gray Colors === */
    --dark1-gray: hsla(0, 0%, 95%, 1);
    --dark2-gray: hsla(0, 0%, 85%, 1);
    --dark3-gray: hsla(0, 0%, 70%, 1);
    --medium1-gray: hsla(0, 0%, 55%, 1);
    --medium2-gray: hsla(0, 0%, 40%, 1);
    --medium3-gray: hsla(0, 0%, 30%, 1);
    --light1-gray: hsla(0, 0%, 26%, 1);
    --light2-gray: hsla(0, 0%, 22%, 1);
    --light3-gray: hsla(0, 0%, 18%, 1);
    /* === Main Background === */
    --main-background: hsla(0, 0%, 16%, 1);
}