:root { --primary: #007bc4; --primary-5: #007bc40d; --primary-10: #007bc41a; --primary-20: #007bc433; --primary-30: #007bc44d; --primary-40: #007bc466; --primary-50: #007bc480; --primary-60: #007bc499; --primary-70: #007bc4b3; --primary-80: #007bc4cc; --primary-90: #007bc4e6; --primary-d-1: #0367a4; --primary-d-2: #04527f; --primary-d-3: #183049; --primary-d-4: #121b26; --primary-l-1: #4fa3d6; --primary-l-2: #c2def0; --primary-l-3: #e6f2f9; --primary-l-4: #d7e3f4; --base: #000000; --base-5: #0000000d; --base-10: #0000001a; --base-20: #00000033; --base-30: #0000004d; --base-40: #00000066; --base-50: #00000080; --base-60: #00000099; --base-70: #000000b3; --base-80: #000000cc; --base-90: #000000e6; --base-l-1: #1f1f1f; --base-l-2: #363636; --base-l-3: #4f4f4f; --base-l-4: #696969; --base-l-5: #858585; --base-l-6: #a3a3a3; --base-l-7: #bfbfbf; --base-l-8: #F3F3F3; --bg-body: hsl(0,0%,100%); --bg-surface: hsla(0,0%,100%,1); --text-body: hsla(0,0%,10%,1); --text-title: hsla(0,0%,10%,1); --border-light: hsla(0,0%,100%,0.15); --border-dark: hsla(0,0%,0%,0.15); --shadow-primary: hsla(0,0%,0%,0.15); --light: hsla(0,0%,100%,1); --light-5: hsla(0,0%,100%,0.05); --light-10: hsla(0,0%,100%,0.1); --light-20: hsla(0,0%,100%,0.2); --light-30: hsla(0,0%,100%,0.3); --light-40: hsla(0,0%,100%,0.4); --light-50: hsla(0,0%,100%,0.5); --light-60: hsla(0,0%,100%,0.6); --light-70: hsla(0,0%,100%,0.7); --light-80: hsla(0,0%,100%,0.8); --light-90: hsla(0,0%,100%,0.9); --light-d-1: hsla(0,0%,88%,1); --light-d-2: hsla(0,0%,75%,1); --light-d-3: hsla(0,0%,64%,1); --light-d-4: hsla(0,0%,52%,1); --light-d-5: hsla(0,0%,41%,1); --light-d-6: hsla(0,0%,31%,1); --light-d-7: hsla(0,0%,21%,1); --light-d-8: hsla(0,0%,12%,1); --dark: hsla(0,0%,0%,1); --dark-5: hsla(0,0%,0%,0.05); --dark-10: hsla(0,0%,0%,0.1); --dark-20: hsla(0,0%,0%,0.2); --dark-30: hsla(0,0%,0%,0.3); --dark-40: hsla(0,0%,0%,0.4); --dark-50: hsla(0,0%,0%,0.5); --dark-60: hsla(0,0%,0%,0.6); --dark-70: hsla(0,0%,0%,0.7); --dark-80: hsla(0,0%,0%,0.8); --dark-90: hsla(0,0%,0%,0.9); --success: hsl(136,95%,56%); --error: #EB0000;}.bg-primary { background-color: var(--primary); }.bg-primary-l-1 { background-color: var(--primary-l-1); }.bg-primary-l-2 { background-color: var(--primary-l-2); }.bg-primary-l-3 { background-color: var(--primary-l-3); }.bg-primary-d-1 { background-color: var(--primary-d-1); }.bg-primary-d-2 { background-color: var(--primary-d-2); }.text-primary { color: var(--primary); }.text-primary-l-1 { color: var(--primary-l-1); }.text-primary-l-2 { color: var(--primary-l-2); }.text-primary-l-3 { color: var(--primary-l-3); }.text-primary-d-1 { color: var(--primary-d-1); }.text-primary-d-2 { color: var(--primary-d-2); }