$Red: #ee3552; $RedShadow: rgba(255, 75, 90, 0.5); $Orange: #FF6B57; $OrangeShadow:rgba(255, 130, 46, 0.5); $Yellow: #ffc107; $YellowShadow:rgba(234, 223, 131, 0.5); $Gold: #ddcfbb; $GoldShadow:rgba(234, 223, 131, 0.5); $Purple:#ac3773; $PurpleShadow:rgba(172, 55, 115, 0.5); $Blue: #3498DB; $BlueShadow:rgba(76, 74, 228, 0.5); $Green: #0d7e00; $GreenShadow:rgba(13, 126, 0, 0.35); $Cyan: #32c5d2; $CyanShadow:rgba(50, 197, 210, 0.32); $LightGray: #e6e6e6; $LightGrayShadow:rgba(107, 107, 107, 0.5); $Gray: #797979; $GrayShadow:rgba(54, 54, 54, 0.5); $Brown: #8b4513; $BrownShadow:rgba(145, 81, 23, 0.5); $Black: #2f353b; $BlackShadow:rgba(0, 0, 0, 0.5); $White: #fff; $WhiteShadow:rgba(255, 255, 255, 0.2); $Teal: #00897b; $TealShadow:rgba(0, 137, 123, 0.2); $Colors: (Red: $Red, Orange: $Orange, Yellow: $Yellow, Gold: $Gold, Purple: $Purple, Blue: $Blue, Green: $Green, Cyan: $Cyan, LightGray: $LightGray, Gray: $Gray, Brown: $Brown, Black: $Black, White: $White); $colors: (red: $Red, orange: $Orange, yellow: $Yellow, gold: $Gold, purple: $Purple, blue: $Blue, green: $Green, cyan: $Cyan, gray: $Gray, brown: $Brown, black: $Black, white: $White, tael: $Teal); $Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, 'grey lighten-3': $LightGrayShadow, brown: $BrownShadow, black: $BlackShadow, white: $WhiteShadow, teal: $TealShadow); :root { --color-red: #ee3552; --color-orange: #ff6b57; --color-purple: #ac3773; --color-pink: #e94c8f; --color-cyan: #32d5c2; --color-blue: #1875BB; --color-dark-blue: #04314B; --color-green: #4fda91; --color-white: #fff; --color-gray: #828282; --color-brown: #915117; --color-black: #000; --color-dark: #000; --color-light-gray: #e6e6e6; --color-light-blue: #C9D3EC; --color-link-hover: #181b31; //------------------------Module Colors --color-portfolio: #915117; --color-client: #32c5d2; --color-task: #ac3773; }