:root {
    --background: hsl(345, 6%, 13%);
    /* 231f20 -- 12% */
    --foreground: hsl(0, 2%, 90%);
    /* e7e6e6 */


    /* CoA Palette */
    --firered15: hsl(9, 83%, 34%);
    --firered30: hsl(9, 98%, 45%);
    --firered45: hsl(9, 84%, 65%);
    --firered60: hsl(8, 63%, 75%);
    --firered75: hsl(8, 44%, 83%);
    --firered90: hsl(12, 22%, 91%);
    --ambergold15: hsl(44, 69%, 25%);
    --ambergold30: hsl(45, 84%, 32%);
    --ambergold45: hsl(45, 95%, 39%);
    --ambergold60: hsl(45, 100%, 45%);
    --ambergold75: hsl(44, 70%, 70%);
    --ambergold90: hsl(43, 25%, 89%);
    --chartreuse15: hsl(65, 35%, 26%);
    --chartreuse30: hsl(65, 45%, 34%);
    --chartreuse30: hsl(65, 53%, 41%);
    --chartreuse60: hsl(66, 59%, 47%);
    --chartreuse75: hsl(66, 64%, 56%);
    --chartreuse90: hsl(63, 28%, 87%);
    --aqua15: hsl(174, 52%, 25%);
    --aqua30: hsl(173, 66%, 32%);
    --aqua45: hsl(173, 74%, 38%);
    --aqua60: hsl(173, 80%, 44%);
    --aqua75: hsl(173, 83%, 49%);
    --aqua90: hsl(175, 21%, 89%);
    --midnightblue15: hsl(208, 89%, 33%);
    --midnightblue30: hsl(209, 74%, 47%);
    --midnightblue45: hsl(209, 55%, 61%);
    --midnightblue60: hsl(209, 40%, 72%);
    --midnightblue75: hsl(209, 26%, 81%);
    --midnightblue90: hsl(210, 12%, 91%);
    --rose15: hsl(331, 73%, 36%);
    --rose30: hsl(332, 90%, 47%);
    --rose45: hsl(331, 94%, 67%);
    --rose60: hsl(331, 74%, 77%);
    --rose75: hsl(331, 52%, 85%);
    --rose90: hsl(332, 30%, 92%);
    --burgundy15: hsl(330, 75%, 36%);
    --burgundy30: hsl(329, 72%, 51%);
    --burgundy45: hsl(329, 53%, 66%);
    --burgundy60: hsl(329, 40%, 75%);
    --burgundy75: hsl(330, 28%, 83%);
    --burgundy90: hsl(334, 16%, 91%);


    /* TTU Grey */
    --lightgrey15: hsl(0, 0%, 38%);
    --lightgrey30: hsl(0, 0%, 51%);
    --lightgrey45: hsl(0, 0%, 62%);
    --lightgrey60: hsl(0, 0%, 73%);
    --lightgrey75: hsl(0, 0%, 83%);
    --lightgrey90: hsl(0, 0%, 93%);


    --underline-width: 4px;
    --underline-block-width: 24px;
    --underline-color: hsla(0, 2%, 90%, 0.5);
    --underline-color-hover: hsla(0, 2%, 90%, 1);
    --underline-transition: 0.5s
}

@media screen and (prefers-color-scheme: light) {
    :root {
        --background: hsl(165, 6%, 87%);
        /* dce0df -- 89% */
        --foreground: hsl(0, 0%, 0%);
        /* 000 */


        --firered15: hsl(8, 53%, 79%);
        --firered30: hsl(9, 75%, 70%);
        --firered45: hsl(9, 100%, 49%);
        --firered60: hsl(9, 91%, 39%);
        --firered75: hsl(9, 68%, 27%);
        --firered90: hsl(0, 0%, 0%);
        --ambergold15: hsl(45, 100%, 48%);
        --ambergold30: hsl(44, 97%, 41%);
        --ambergold45: hsl(45, 89%, 35%);
        --ambergold60: hsl(45, 76%, 28%);
        --ambergold75: hsl(45, 56%, 19%);
        --ambergold90: hsl(0, 0%, 0%);
        --chartreuse15: hsl(66, 61%, 49%);
        --chartreuse30: hsl(66, 56%, 43%);
        --chartreuse45: hsl(65, 48%, 37%);
        --chartreuse60: hsl(66, 39%, 30%);
        --chartreuse75: hsl(66, 28%, 21%);
        --chartreuse90: hsl(0, 0%, 0%);
        --aqua15: hsl(173, 81%, 46%);
        --aqua30: hsl(173, 77%, 41%);
        --aqua45: hsl(173, 69%, 35%);
        --aqua60: hsl(173, 59%, 28%);
        --aqua75: hsl(174, 42%, 20%);
        --aqua90: hsl(0, 0%, 0%);
        --midnightblue15: hsl(209, 34%, 76%);
        --midnightblue30: hsl(208, 49%, 65%);
        --midnightblue45: hsl(209, 66%, 52%);
        --midnightblue60: hsl(209, 84%, 38%);
        --midnightblue75: hsl(208, 97%, 24%);
        --midnightblue90: hsl(0, 0%, 0%);
        --rose15: hsl(331, 64%, 81%);
        --rose30: hsl(331, 86%, 72%);
        --rose45: hsl(332, 95%, 51%);
        --rose60: hsl(332, 81%, 41%);
        --rose75: hsl(332, 58%, 28%);
        --rose90: hsl(0, 0%, 0%);
        --burgundy15: hsl(330, 35%, 79%);
        --burgundy30: hsl(329, 48%, 70%);
        --burgundy45: hsl(329, 64%, 59%);
        --burgundy60: hsl(329, 77%, 41%);
        --burgundy75: hsl(329, 64%, 27%);
        --burgundy90: hsl(0, 0%, 0%);


        /* TTU Grey */
        --lightgrey15: hsl(0, 0%, 88%);
        --lightgrey30: hsl(180, 1%, 78%);
        --lightgrey45: hsl(0, 0%, 67%);
        --lightgrey60: hsl(0, 0%, 56%);
        --lightgrey75: hsl(0, 0%, 43%);
        --lightgrey90: hsl(180, 1%, 29%);


        --underline-color: hsla(0, 0%, 0%, 0.5);
        --underline-color-hover: hsla(0, 0%, 0%, 1);
    }
}
