@layer base {
    :root {
        --color-accent: var(--color-altorange);

        --color-black: hsl(221 39% 11%);
        --color-midnight: hsl(213 96% 11%);
        --color-gunmetal: hsl(217 19% 27%);
        --color-steel: hsl(215 20% 45%);
        --color-stainless: hsl(215 20% 65%);
        --color-darkgrey: hsl(218 11% 65%);
        --color-bordergrey: hsl(220 13% 91%);
        --color-lightgrey: hsl(210 20% 98%);
        --color-white: hsl(0 0% 100%);

        --color-darkblue: hsl(210 40% 45%);
        --color-lavendar: hsl(240 100% 75%);
        --color-blue: hsl(209 85% 67%);
        --color-purple: hsl(271 64% 48%);
        --color-darkpurple: hsl(330 29% 20%);
        --color-maroon: hsl(355 74% 33%);
        --color-red: hsl(5 70% 48%);
        --color-darkred: hsl(5, 70%, 36%);
        --color-brick: hsl(1 84% 59%);
        --color-altorange: hsl(21 89% 54%);
        --color-hotpink: hsl(333 85% 53%);
        --color-sage: hsl(130 45% 80%);
        --color-mint: hsl(118 28% 56%);
        --color-green: hsl(135 93% 32%);
        --color-darkgreen: hsl(135, 96%, 22%);
        --color-yellow: hsl(45 100% 64%);
        --color-darkyellow: hsl(45, 84%, 49%);
        --color-darkteal: hsl(183 31% 34%);
        --color-dark: hsl(0 0% 18%);
    }
}