:root {
    /* indigo (primary) */
    --color-primary-900: 234deg 62% 26%;
    --color-primary-800: 232deg 51% 36%;
    --color-primary-700: 230deg 49% 41%;
    --color-primary-600: 228deg 45% 45%;
    --color-primary-500: 227deg 42% 51%;
    --color-primary-400: 227deg 50% 59%;
    --color-primary-300: 225deg 57% 67%;
    --color-primary-200: 224deg 67% 76%;
    --color-primary-100: 221deg 78% 86%;
    --color-primary-50: 221deg 68% 93%;

    /* cool gray (neutral) */
    --color-gray-950: 224deg 28% 8%;
    --color-gray-900: 210deg 24% 16%;
    --color-gray-800: 209deg 20% 25%;
    --color-gray-700: 209deg 18% 30%;
    --color-gray-600: 209deg 14% 37%;
    --color-gray-500: 211deg 12% 43%;
    --color-gray-400: 211deg 10% 53%;
    --color-gray-300: 211deg 13% 65%;
    --color-gray-200: 210deg 16% 82%;
    --color-gray-100: 214deg 15% 91%;
    --color-gray-50: 216deg 12% 97%;

    /* light blue (accent/supporting) */
    --color-blue-900: 204deg 96% 27%;
    --color-blue-800: 203deg 87% 34%;
    --color-blue-700: 202deg 83% 41%;
    --color-blue-600: 201deg 79% 46%;
    --color-blue-500: 199deg 84% 55%;
    --color-blue-400: 197deg 92% 61%;
    --color-blue-300: 196deg 94% 67%;
    --color-blue-200: 195deg 97% 75%;
    --color-blue-100: 195deg 100% 85%;
    --color-blue-50: 195deg 100% 95%;

    /* red (accent/supporting) */
    --color-red-900: 348deg 94% 20%;
    --color-red-800: 350deg 94% 28%;
    --color-red-700: 352deg 90% 35%;
    --color-red-600: 354deg 85% 44%;
    --color-red-500: 356deg 75% 53%;
    --color-red-400: 360deg 83% 62%;
    --color-red-300: 360deg 91% 69%;
    --color-red-200: 360deg 100% 80%;
    --color-red-100: 360deg 100% 87%;
    --color-red-50: 360deg 100% 95%;

    /* yellow (accent/supporting) */
    --color-yellow-900: 15deg 86% 30%;
    --color-yellow-800: 22deg 82% 39%;
    --color-yellow-700: 29deg 80% 44%;
    --color-yellow-600: 36deg 77% 49%;
    --color-yellow-500: 42deg 87% 55%;
    --color-yellow-400: 44deg 92% 63%;
    --color-yellow-300: 48deg 94% 68%;
    --color-yellow-200: 48deg 95% 76%;
    --color-yellow-100: 48deg 100% 88%;
    --color-yellow-50: 49deg 100% 96%;

    /* teal (accent/supporting) */
    --color-green-900: 170deg 97% 15%;
    --color-green-800: 168deg 80% 23%;
    --color-green-700: 166deg 72% 28%;
    --color-green-600: 164deg 71% 34%;
    --color-green-500: 162deg 63% 41%;
    --color-green-400: 160deg 51% 49%;
    --color-green-300: 158deg 58% 62%;
    --color-green-200: 156deg 73% 74%;
    --color-green-100: 154deg 75% 87%;
    --color-green-50: 152deg 68% 96%;
}
