:root {
    --brand_orange_100: hsl(30, 100%, 90%);
    --brand_orange_200: hsl(30, 100%, 80%);
    --brand_orange_300: hsl(30, 100%, 70%);
    --brand_orange_400: hsl(30, 100%, 60%); /* AC orange */
    --brand_orange_500: hsl(30, 100%, 50%);
    --brand_orange_600: hsl(30, 100%, 40%);
    --brand_orange_700: hsl(30, 100%, 30%);
    --brand_orange_800: hsl(30, 100%, 20%);
    --brand_orange_900: hsl(30, 100%, 10%);
    
    --brand_blue_100: hsl(200, 100%, 90%);
    --brand_blue_200: hsl(200, 100%, 80%);
    --brand_blue_300: hsl(200, 100%, 70%);
    --brand_blue_400: hsl(200, 100%, 60%);
    --brand_blue_500: hsl(200, 100%, 50%);
    --brand_blue_600: hsl(200, 100%, 40%);
    --brand_blue_700: hsl(200, 100%, 30%); /* AC blue */
    --brand_blue_800: hsl(200, 100%, 20%);
    --brand_blue_900: hsl(200, 100%, 10%);

    --brand_black_100: hsl(0, 0%, 90%);
    --brand_black_200: hsl(0, 0%, 80%);
    --brand_black_300: hsl(0, 0%, 70%);
    --brand_black_400: hsl(0, 0%, 60%);
    --brand_black_500: hsl(0, 0%, 50%);
    --brand_black_600: hsl(0, 0%, 40%);
    --brand_black_700: hsl(0, 0%, 30%);
    --brand_black_800: hsl(0, 0%, 20%); /* AC black */
    --brand_black_900: hsl(0, 0%, 10%);

    --misc_darkgrey_100: hsl(200, 6%, 90%);
    --misc_darkgrey_200: hsl(200, 9%, 80%);
    --misc_darkgrey_300: hsl(200, 12%, 70%);
    --misc_darkgrey_400: hsl(200, 15%, 60%);
    --misc_darkgrey_500: hsl(200, 18%, 50%);
    --misc_darkgrey_600: hsl(200, 21%, 40%);
    --misc_darkgrey_700: hsl(200, 24%, 30%);
    --misc_darkgrey_800: hsl(200, 27%, 20%); /* darkgrey */
    --misc_darkgrey_900: hsl(200, 30%, 10%);

    --misc_red_100: hsl(0, 100%, 90%);
    --misc_red_200: hsl(0, 100%, 80%);
    --misc_red_300: hsl(0, 100%, 70%);
    --misc_red_400: hsl(0, 100%, 60%);
    --misc_red_500: hsl(0, 100%, 50%);
    --misc_red_600: hsl(0, 100%, 40%);
    --misc_red_700: hsl(0, 100%, 30%); /* red */
    --misc_red_800: hsl(0, 100%, 20%);
    --misc_red_900: hsl(0, 100%, 10%);

    --misc_pink_100: hsl(330, 100%, 90%);
    --misc_pink_200: hsl(330, 100%, 80%);
    --misc_pink_300: hsl(330, 100%, 70%);
    --misc_pink_400: hsl(330, 100%, 60%);
    --misc_pink_500: hsl(330, 100%, 50%);
    --misc_pink_600: hsl(330, 100%, 40%);
    --misc_pink_700: hsl(330, 100%, 30%); /* pink */
    --misc_pink_800: hsl(330, 100%, 20%);
    --misc_pink_900: hsl(330, 100%, 10%);

    --misc_brightorange_100: hsl(15, 100%, 90%);
    --misc_brightorange_200: hsl(15, 100%, 80%);
    --misc_brightorange_300: hsl(15, 100%, 70%);
    --misc_brightorange_400: hsl(15, 100%, 60%);
    --misc_brightorange_500: hsl(15, 100%, 50%);
    --misc_brightorange_600: hsl(15, 100%, 40%);
    --misc_brightorange_700: hsl(15, 100%, 30%); /* brightorange */
    --misc_brightorange_800: hsl(15, 100%, 20%);
    --misc_brightorange_900: hsl(15, 100%, 10%);

    --misc_yellow_100: hsl(60, 100%, 90%);
    --misc_yellow_200: hsl(60, 100%, 80%);
    --misc_yellow_300: hsl(60, 100%, 70%);
    --misc_yellow_400: hsl(60, 100%, 60%);
    --misc_yellow_500: hsl(60, 100%, 50%);
    --misc_yellow_600: hsl(60, 100%, 40%);
    --misc_yellow_700: hsl(60, 100%, 30%); /* yellow */
    --misc_yellow_800: hsl(60, 100%, 20%);
    --misc_yellow_900: hsl(60, 100%, 10%);

    --misc_green_100: hsl(80, 100%, 90%);
    --misc_green_200: hsl(80, 100%, 80%);
    --misc_green_300: hsl(80, 100%, 70%);
    --misc_green_400: hsl(80, 100%, 60%);
    --misc_green_500: hsl(80, 100%, 50%);
    --misc_green_600: hsl(80, 100%, 40%);
    --misc_green_700: hsl(80, 100%, 30%); /* green */
    --misc_green_800: hsl(80, 100%, 20%);
    --misc_green_900: hsl(80, 100%, 10%);

    --misc_blue_100: hsl(250, 100%, 90%);
    --misc_blue_200: hsl(250, 100%, 80%);
    --misc_blue_300: hsl(250, 100%, 70%);
    --misc_blue_400: hsl(250, 100%, 60%);
    --misc_blue_500: hsl(250, 100%, 50%);
    --misc_blue_600: hsl(250, 100%, 40%);
    --misc_blue_700: hsl(250, 100%, 30%); /* blue */
    --misc_blue_800: hsl(250, 100%, 20%);
    --misc_blue_900: hsl(250, 100%, 10%);

    --misc_lightblue_100: hsl(215, 100%, 95%);
    --misc_lightblue_200: hsl(215, 100%, 90%);
    --misc_lightblue_300: hsl(215, 100%, 85%);
    --misc_lightblue_400: hsl(215, 100%, 80%);
    --misc_lightblue_500: hsl(215, 100%, 75%);
    --misc_lightblue_600: hsl(215, 100%, 70%);
    --misc_lightblue_700: hsl(215, 100%, 65%); /* lightblue */
    --misc_lightblue_800: hsl(215, 100%, 60%);
    --misc_lightblue_900: hsl(215, 100%, 55%);

    --misc_purple_100: hsl(280, 100%, 90%);
    --misc_purple_200: hsl(280, 100%, 80%);
    --misc_purple_300: hsl(280, 100%, 70%);
    --misc_purple_400: hsl(280, 100%, 60%);
    --misc_purple_500: hsl(280, 100%, 50%);
    --misc_purple_600: hsl(280, 100%, 40%);
    --misc_purple_700: hsl(280, 100%, 30%); /* purple */
    --misc_purple_800: hsl(280, 100%, 20%);
    --misc_purple_900: hsl(280, 100%, 10%);

    --misc_cyan_100: hsl(175, 100%, 90%);
    --misc_cyan_200: hsl(175, 100%, 80%);
    --misc_cyan_300: hsl(175, 100%, 70%);
    --misc_cyan_400: hsl(175, 100%, 60%);
    --misc_cyan_500: hsl(175, 100%, 50%);
    --misc_cyan_600: hsl(175, 100%, 40%);
    --misc_cyan_700: hsl(175, 100%, 30%); /* cyan */
    --misc_cyan_800: hsl(175, 100%, 20%);
    --misc_cyan_900: hsl(175, 100%, 10%);

    --misc_brown_100: hsl(16, 15%, 80%);
    --misc_brown_200: hsl(16, 15%, 70%);
    --misc_brown_300: hsl(16, 20%, 60%);
    --misc_brown_400: hsl(16, 20%, 50%);
    --misc_brown_500: hsl(16, 25%, 40%);
    --misc_brown_600: hsl(16, 25%, 35%);
    --misc_brown_700: hsl(16, 25%, 30%); /* brown */
    --misc_brown_800: hsl(16, 25%, 25%);
    --misc_brown_900: hsl(16, 30%, 20%);

    --misc_olivegreen_100: hsl(90, 55%, 80%);
    --misc_olivegreen_200: hsl(90, 55%, 70%);
    --misc_olivegreen_300: hsl(90, 55%, 60%);
    --misc_olivegreen_400: hsl(90, 55%, 45%);
    --misc_olivegreen_500: hsl(90, 55%, 35%);
    --misc_olivegreen_600: hsl(90, 55%, 25%);
    --misc_olivegreen_700: hsl(90, 55%, 20%); /* olivegreen */
    --misc_olivegreen_800: hsl(90, 55%, 15%);
    --misc_olivegreen_900: hsl(90, 55%, 10%);

    --misc_gold_100: hsl(48, 95%, 90%);
    --misc_gold_200: hsl(48, 95%, 80%);
    --misc_gold_300: hsl(48, 95%, 70%);
    --misc_gold_400: hsl(48, 95%, 60%);
    --misc_gold_500: hsl(48, 95%, 50%);
    --misc_gold_600: hsl(48, 95%, 40%);
    --misc_gold_700: hsl(48, 95%, 30%);
    --misc_gold_800: hsl(48, 95%, 20%);
    --misc_gold_900: hsl(48, 95%, 10%);
}

div.brand_orange_100.color-sample {
    background: var(--brand_orange_100);
}
div.brand_orange_200.color-sample {
    background: var(--brand_orange_200);
}
div.brand_orange_300.color-sample {
    background: var(--brand_orange_300);
}
div.brand_orange_400.color-sample {
    background: var(--brand_orange_400);
}
div.brand_orange_500.color-sample {
    background: var(--brand_orange_500);
}
div.brand_orange_600.color-sample {
    background: var(--brand_orange_600);
}
div.brand_orange_700.color-sample {
    background: var(--brand_orange_700);
}
div.brand_orange_800.color-sample {
    background: var(--brand_orange_800);
}
div.brand_orange_900.color-sample {
    background: var(--brand_orange_900);
}

div.brand_blue_100.color-sample {
    background: var(--brand_blue_100);
}
div.brand_blue_200.color-sample {
    background: var(--brand_blue_200);
}
div.brand_blue_300.color-sample {
    background: var(--brand_blue_300);
}
div.brand_blue_400.color-sample {
    background: var(--brand_blue_400);
}
div.brand_blue_500.color-sample {
    background: var(--brand_blue_500);
}
div.brand_blue_600.color-sample {
    background: var(--brand_blue_600);
}
div.brand_blue_700.color-sample {
    background: var(--brand_blue_700);
}
div.brand_blue_800.color-sample {
    background: var(--brand_blue_800);
}
div.brand_blue_900.color-sample {
    background: var(--brand_blue_900);
}

div.brand_black_100.color-sample {
    background: var(--brand_black_100);
}
div.brand_black_200.color-sample {
    background: var(--brand_black_200);
}
div.brand_black_300.color-sample {
    background: var(--brand_black_300);
}
div.brand_black_400.color-sample {
    background: var(--brand_black_400);
}
div.brand_black_500.color-sample {
    background: var(--brand_black_500);
}
div.brand_black_600.color-sample {
    background: var(--brand_black_600);
}
div.brand_black_700.color-sample {
    background: var(--brand_black_700);
}
div.brand_black_800.color-sample {
    background: var(--brand_black_800);
}
div.brand_black_900.color-sample {
    background: var(--brand_black_900);
}

div.misc_darkgrey_100.color-sample {
    background: var(--misc_darkgrey_100);
}
div.misc_darkgrey_200.color-sample {
    background: var(--misc_darkgrey_200);
}
div.misc_darkgrey_300.color-sample {
    background: var(--misc_darkgrey_300);
}
div.misc_darkgrey_400.color-sample {
    background: var(--misc_darkgrey_400);
}
div.misc_darkgrey_500.color-sample {
    background: var(--misc_darkgrey_500);
}
div.misc_darkgrey_600.color-sample {
    background: var(--misc_darkgrey_600);
}
div.misc_darkgrey_700.color-sample {
    background: var(--misc_darkgrey_700);
}
div.misc_darkgrey_800.color-sample {
    background: var(--misc_darkgrey_800);
}
div.misc_darkgrey_900.color-sample {
    background: var(--misc_darkgrey_900);
}

div.misc_red_100.color-sample {
    background: var(--misc_red_100);
}
div.misc_red_200.color-sample {
    background: var(--misc_red_200);
}
div.misc_red_300.color-sample {
    background: var(--misc_red_300);
}
div.misc_red_400.color-sample {
    background: var(--misc_red_400);
}
div.misc_red_500.color-sample {
    background: var(--misc_red_500);
}
div.misc_red_600.color-sample {
    background: var(--misc_red_600);
}
div.misc_red_700.color-sample {
    background: var(--misc_red_700);
}
div.misc_red_800.color-sample {
    background: var(--misc_red_800);
}
div.misc_red_900.color-sample {
    background: var(--misc_red_900);
}

div.misc_pink_100.color-sample {
    background: var(--misc_pink_100);
}
div.misc_pink_200.color-sample {
    background: var(--misc_pink_200);
}
div.misc_pink_300.color-sample {
    background: var(--misc_pink_300);
}
div.misc_pink_400.color-sample {
    background: var(--misc_pink_400);
}
div.misc_pink_500.color-sample {
    background: var(--misc_pink_500);
}
div.misc_pink_600.color-sample {
    background: var(--misc_pink_600);
}
div.misc_pink_700.color-sample {
    background: var(--misc_pink_700);
}
div.misc_pink_800.color-sample {
    background: var(--misc_pink_800);
}
div.misc_pink_900.color-sample {
    background: var(--misc_pink_900);
}

div.misc_brightorange_100.color-sample {
    background: var(--misc_brightorange_100);
}
div.misc_brightorange_200.color-sample {
    background: var(--misc_brightorange_200);
}
div.misc_brightorange_300.color-sample {
    background: var(--misc_brightorange_300);
}
div.misc_brightorange_400.color-sample {
    background: var(--misc_brightorange_400);
}
div.misc_brightorange_500.color-sample {
    background: var(--misc_brightorange_500);
}
div.misc_brightorange_600.color-sample {
    background: var(--misc_brightorange_600);
}
div.misc_brightorange_700.color-sample {
    background: var(--misc_brightorange_700);
}
div.misc_brightorange_800.color-sample {
    background: var(--misc_brightorange_800);
}
div.misc_brightorange_900.color-sample {
    background: var(--misc_brightorange_900);
}

div.misc_yellow_100.color-sample {
    background: var(--misc_yellow_100);
}
div.misc_yellow_200.color-sample {
    background: var(--misc_yellow_200);
}
div.misc_yellow_300.color-sample {
    background: var(--misc_yellow_300);
}
div.misc_yellow_400.color-sample {
    background: var(--misc_yellow_400);
}
div.misc_yellow_500.color-sample {
    background: var(--misc_yellow_500);
}
div.misc_yellow_600.color-sample {
    background: var(--misc_yellow_600);
}
div.misc_yellow_700.color-sample {
    background: var(--misc_yellow_700);
}
div.misc_yellow_800.color-sample {
    background: var(--misc_yellow_800);
}
div.misc_yellow_900.color-sample {
    background: var(--misc_yellow_900);
}

div.misc_green_100.color-sample {
    background: var(--misc_green_100);
}
div.misc_green_200.color-sample {
    background: var(--misc_green_200);
}
div.misc_green_300.color-sample {
    background: var(--misc_green_300);
}
div.misc_green_400.color-sample {
    background: var(--misc_green_400);
}
div.misc_green_500.color-sample {
    background: var(--misc_green_500);
}
div.misc_green_600.color-sample {
    background: var(--misc_green_600);
}
div.misc_green_700.color-sample {
    background: var(--misc_green_700);
}
div.misc_green_800.color-sample {
    background: var(--misc_green_800);
}
div.misc_green_900.color-sample {
    background: var(--misc_green_900);
}

div.misc_blue_100.color-sample {
    background: var(--misc_blue_100);
}
div.misc_blue_200.color-sample {
    background: var(--misc_blue_200);
}
div.misc_blue_300.color-sample {
    background: var(--misc_blue_300);
}
div.misc_blue_400.color-sample {
    background: var(--misc_blue_400);
}
div.misc_blue_500.color-sample {
    background: var(--misc_blue_500);
}
div.misc_blue_600.color-sample {
    background: var(--misc_blue_600);
}
div.misc_blue_700.color-sample {
    background: var(--misc_blue_700);
}
div.misc_blue_800.color-sample {
    background: var(--misc_blue_800);
}
div.misc_blue_900.color-sample {
    background: var(--misc_blue_900);
}

div.misc_purple_100.color-sample {
    background: var(--misc_purple_100);
}
div.misc_purple_200.color-sample {
    background: var(--misc_purple_200);
}
div.misc_purple_300.color-sample {
    background: var(--misc_purple_300);
}
div.misc_purple_400.color-sample {
    background: var(--misc_purple_400);
}
div.misc_purple_500.color-sample {
    background: var(--misc_purple_500);
}
div.misc_purple_600.color-sample {
    background: var(--misc_purple_600);
}
div.misc_purple_700.color-sample {
    background: var(--misc_purple_700);
}
div.misc_purple_800.color-sample {
    background: var(--misc_purple_800);
}
div.misc_purple_900.color-sample {
    background: var(--misc_purple_900);
}

div.misc_cyan_100.color-sample {
    background: var(--misc_cyan_100);
}
div.misc_cyan_200.color-sample {
    background: var(--misc_cyan_200);
}
div.misc_cyan_300.color-sample {
    background: var(--misc_cyan_300);
}
div.misc_cyan_400.color-sample {
    background: var(--misc_cyan_400);
}
div.misc_cyan_500.color-sample {
    background: var(--misc_cyan_500);
}
div.misc_cyan_600.color-sample {
    background: var(--misc_cyan_600);
}
div.misc_cyan_700.color-sample {
    background: var(--misc_cyan_700);
}
div.misc_cyan_800.color-sample {
    background: var(--misc_cyan_800);
}
div.misc_cyan_900.color-sample {
    background: var(--misc_cyan_900);
}

div.misc_lightblue_100.color-sample {
    background: var(--misc_lightblue_100);
}
div.misc_lightblue_200.color-sample {
    background: var(--misc_lightblue_200);
}
div.misc_lightblue_300.color-sample {
    background: var(--misc_lightblue_300);
}
div.misc_lightblue_400.color-sample {
    background: var(--misc_lightblue_400);
}
div.misc_lightblue_500.color-sample {
    background: var(--misc_lightblue_500);
}
div.misc_lightblue_600.color-sample {
    background: var(--misc_lightblue_600);
}
div.misc_lightblue_700.color-sample {
    background: var(--misc_lightblue_700);
}
div.misc_lightblue_800.color-sample {
    background: var(--misc_lightblue_800);
}
div.misc_lightblue_900.color-sample {
    background: var(--misc_lightblue_900);
}

div.misc_brown_100.color-sample {
    background: var(--misc_brown_100);
}
div.misc_brown_200.color-sample {
    background: var(--misc_brown_200);
}
div.misc_brown_300.color-sample {
    background: var(--misc_brown_300);
}
div.misc_brown_400.color-sample {
    background: var(--misc_brown_400);
}
div.misc_brown_500.color-sample {
    background: var(--misc_brown_500);
}
div.misc_brown_600.color-sample {
    background: var(--misc_brown_600);
}
div.misc_brown_700.color-sample {
    background: var(--misc_brown_700);
}
div.misc_brown_800.color-sample {
    background: var(--misc_brown_800);
}
div.misc_brown_900.color-sample {
    background: var(--misc_brown_900);
}

div.misc_olivegreen_100.color-sample {
    background: var(--misc_olivegreen_100);
}
div.misc_olivegreen_200.color-sample {
    background: var(--misc_olivegreen_200);
}
div.misc_olivegreen_300.color-sample {
    background: var(--misc_olivegreen_300);
}
div.misc_olivegreen_400.color-sample {
    background: var(--misc_olivegreen_400);
}
div.misc_olivegreen_500.color-sample {
    background: var(--misc_olivegreen_500);
}
div.misc_olivegreen_600.color-sample {
    background: var(--misc_olivegreen_600);
}
div.misc_olivegreen_700.color-sample {
    background: var(--misc_olivegreen_700);
}
div.misc_olivegreen_800.color-sample {
    background: var(--misc_olivegreen_800);
}
div.misc_olivegreen_900.color-sample {
    background: var(--misc_olivegreen_900);
}

div.misc_gold_100.color-sample {
    background: var(--misc_gold_100);
}
div.misc_gold_200.color-sample {
    background: var(--misc_gold_200);
}
div.misc_gold_300.color-sample {
    background: var(--misc_gold_300);
}
div.misc_gold_400.color-sample {
    background: var(--misc_gold_400);
}
div.misc_gold_500.color-sample {
    background: var(--misc_gold_500);
}
div.misc_gold_600.color-sample {
    background: var(--misc_gold_600);
}
div.misc_gold_700.color-sample {
    background: var(--misc_gold_700);
}
div.misc_gold_800.color-sample {
    background: var(--misc_gold_800);
}
div.misc_gold_900.color-sample {
    background: var(--misc_gold_900);
}