:root {
    /* --main-color: hsl(0, 0%, 100%); */
    /* #FFFFFF; rgb(255, 255, 255) */
    --main-color: #FAFAFA;
    --main-color-50: #fafafa;
    --main-color-200: #FFFFFF;
    --main-color-300: #FFFFFF;
    /* --secondary-color: hsl(210, 20%, 98%); */
    /* #F9FAFB; rgb(249, 250, 251) */
    --secondary-color: hsl(240, 10%, 95%);
    --peak-color: hsl(215, 100%, 51%);
    /* --peak-color: hsl(214, 81.7%, 50.6%); */
    /* #1A73E8; rgb(26, 115, 232) */
    --input-color: hsl(0, 0%, 100%);
    /* #FFFFFF; rgb(255, 255, 255) */
    --input-border-color: hsl(0, 0%, 80%);
    /* #CCCCCC rgb(204, 204, 204) */
    --border-color: hsl(0, 0%, 90%);
    /* #CCCCCC rgb(204, 204, 204) */

    --gray: hsl(0, 0%, 80%);
    /* #CCCCCC rgb(204, 204, 204) */
    --gray-light: hsl(0, 0%, 90%);
    /* #E5E5E5; rgb(229, 229, 229) */

    --green: hsl(121, 49%, 54%);
    --green-50: hsl(121, 20%, 5%);
    --green-200: hsl(121, 49%, 96%);
    /* #4EC350; rgb(78, 195, 80) */
    --yellow: hsl(50, 80%, 54%);

    --red: hsl(2, 78%, 55%);
    /* #E53935; rgb(229, 57, 53) */

    --shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    --hover-shadow: 0 0 16px rgba(0, 0, 0, 0.05);

    --ff: "montserrat", sans-serif;

    --fc: hsl(0, 0%, 11%);
    /* #1C1C1C; rgb(28, 28, 28) */
    --fc-white: hsl(0, 0%, 100%);
    /* #FFFFFF; rgb(255, 255, 255) */
    --fc-nonFocus: hsla(0, 0%, 11%, 0.65);

    /* Main-Color Variation */

    --peak-color-200: hsl(215, 100%, 60%);
    --peak-color-100: hsl(215, 100%, 51%);
    --peak-color-90: hsl(215, 100%, 50%);
    --peak-color-80: hsl(215, 100%, 49.5%);
    --peak-color-50: #e2f2ff;
    --peak-color-70-o-05: #7eb4ff21;
    --peak-color-50-o-03: #e2f2ff66;

    /* Dark */

    --main-color-dark: hsl(0, 0%, 2%);
    --secondary-color-dark: hsl(240, 2%, 12%);
    /* #1E1E1F; rgb(30, 30, 31) */
    --input-color-dark: hsl(0, 0%, 23%);
    /* #3B3B3B; rgb(59, 59, 59) */
    --input-border-color-dark: hsl(0, 0%, 45%);
    /* #737373; rgb(115, 115, 115) */
    --border-color-dark: hsl(0, 0%, 20%);
    /* #333333; rgb(51, 51, 51) */

    --gray-dark: hsl(0, 0%, 20%);
    /* #333333; rgb(51, 51, 51) */
    --gray-light-dark: hsl(0, 0%, 40%);
    /* #666666; rgb(102, 102, 102) */

    --shadow-dark: 0 0 8px rgba(255, 255, 255, 0.2);

    --fc-dark: hsl(0, 0%, 95%);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* --main-color: hsl(0, 0%, 2%);
        --main-color-200: hsl(0, 0%, 2%); */
        --main-color: #121212;
        --main-color-50: #161616;
        --main-color-200: #1d1d1d;
        --main-color-250: #1f1f1f;
        --main-color-300: #212121;
        --secondary-color: hsl(240, 2%, 12%);
        /* #1E1E1F; rgb(30, 30, 31) */
        --input-color: hsl(0, 0%, 23%);
        /* #3B3B3B; rgb(59, 59, 59) */
        --input-border-color: hsl(0, 0%, 45%);
        /* #737373; rgb(115, 115, 115) */
        /* --border-color: hsl(0, 0%, 20%); */
        /* #333333; rgb(51, 51, 51) */

        --green-200: hsl(121, 49%, 88%);

        --border-color: #212121;
        --border-color-200: #242424;

        --gray: hsl(0, 0%, 20%);
        /* #333333; rgb(51, 51, 51) */
        --gray-light: hsl(0, 0%, 40%);
        /* #666666; rgb(102, 102, 102) */

        /* --shadow: 0 0 16px rgba(255, 255, 255, 0.05);
        --hover-shadow: 0 0 32px rgba(255, 255, 255, 0.05); */

        --fc: hsl(0, 0%, 95%);
        --fc-nonFocus: hsla(0, 0%, 95%, 0.5);

        --peak-color-200: hsl(215, 100%, 60%);
        --peak-color-100: #0081ff;
        --peak-color-90: hsl(215, 100%, 50%);
        --peak-color-80: #0081ff;
        --peak-color-50: hsl(215, 100%, 40%);
        --peak-color-50-o-03: #056dff11;

        --peak-color-90: hsl(215, 100%, 51%);
    }
}