:root { --bricks-color-grey-100: #f5f5f5; --bricks-color-grey-300: #e0e0e0; --bricks-color-grey-500: #9e9e9e; --bricks-color-grey-700: #616161; --bricks-color-grey-800: #424242; --bricks-color-grey-900: #212121; --bricks-color-yellow: #ffeb3b; --bricks-color-amber: #ffc107; --bricks-color-orange: #ff9800; --bricks-color-deep-orange: #ff5722; --bricks-color-red: #f44336; --bricks-color-purple: #9c27b0; --bricks-color-blue: #2196f3; --bricks-color-light-blue: #03a9f4; --bricks-color-sky-blue: #81D4FA; --bricks-color-green: #4caf50; --bricks-color-light-green: #8bc34a; --bricks-color-lime: #cddc39; --black: hsl(0 0% 0%); --white: hsl(0 0% 100%); --m21-blue-100: hsl(204 100% 95%); --m21-blue-150: hsl(204 100% 90%); --m21-blue-200: hsl(203 100% 84%); --m21-blue-250: hsl(205 100% 78%); --m21-blue-300: hsl(204 100% 73%); --m21-blue-350: hsl(202 100% 60%); --m21-blue-400: hsl(200 100% 47%); --m21-blue-450: hsl(208 100% 46%); --m21-blue-500: hsl(217 100% 46%); --m21-blue-550: hsl(220 100% 44%); --m21-blue-600: hsl(223 100% 41%); --m21-blue-650: hsl(225 100% 36%); --m21-blue-700: hsl(229 100% 31%); --m21-blue-750: hsl(228 100% 24%); --m21-blue-800: hsl(225 100% 16%); --m21-blue-850: hsl(225 100% 12%); --m21-blue-900: hsl(225 100% 8%); --gray-100: hsl(0 0% 94%); --gray-150: hsl(0 0% 88%); --gray-200: hsl(0 0% 82%); --gray-250: hsl(0 0% 74%); --gray-300: hsl(0 0% 67%); --gray-350: hsl(0 0% 64%); --gray-400: hsl(0 0% 60%); --gray-450: hsl(0 0% 54%); --gray-500: hsl(0 0% 47%); --gray-550: hsl(0 0% 40%); --gray-600: hsl(0 0% 33%); --gray-650: hsl(0 0% 26%); --gray-700: hsl(0 0% 20%); --gray-750: hsl(0 0% 16%); --gray-800: hsl(0 0% 13%); --gray-850: hsl(0 0% 10%); --gray-900: hsl(0 0% 7%); --positive: hsl(148 100% 33%); --negative: hsl(0 100% 42%); --alert: hsl(0 100% 50%); --warning: hsl(40 100% 50%); --positive-soft: hsl(147 100% 89%); --negative-soft: hsl(0 100% 89%); --alert-soft: hsl(0 100% 92%); --warning-soft: hsl(48 100% 95%);}