:root { --primary: hsl(230, 94%, 49%); --secondary: hsl(46, 95%, 62%); --tertiary: hsl(46, 16%, 56%); --primary-l-1: rgb(57, 89, 245); --primary-l-2: rgb(106, 130, 247); --primary-l-3: rgb(156, 172, 250); --primary-l-4: rgb(205, 213, 252); --primary-t-1: rgba(57, 89, 245, 0.8); --primary-t-2: rgba(106, 130, 247, 0.6); --primary-t-3: rgba(156, 172, 250, 0.4); --primary-t-4: rgba(205, 213, 252, 0.2); --secondary-l-1: rgb(251, 217, 104); --secondary-l-2: rgb(252, 226, 142); --secondary-l-3: rgb(253, 236, 179); --secondary-l-4: rgb(254, 245, 217); --secondary-t-1: rgba(251, 217, 104, 0.8); --secondary-t-2: rgba(252, 226, 142, 0.6); --secondary-t-3: rgba(253, 236, 179, 0.4); --secondary-t-4: rgba(254, 245, 217, 0.2); --tertiary-l-1: rgb(180, 173, 151); --tertiary-l-2: rgb(199, 193, 177); --tertiary-l-3: rgb(217, 214, 203); --tertiary-l-4: rgb(236, 234, 229); --tertiary-t-1: rgba(180, 173, 151, 0.8); --tertiary-t-2: rgba(199, 193, 177, 0.6); --tertiary-t-3: rgba(217, 214, 203, 0.4); --tertiary-t-4: rgba(236, 234, 229, 0.2);}.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-l-4 { background-color: var(--primary-l-4); }.bg-primary-t-1 { background-color: var(--primary-t-1); }.bg-primary-t-2 { background-color: var(--primary-t-2); }.bg-primary-t-3 { background-color: var(--primary-t-3); }.bg-primary-t-4 { background-color: var(--primary-t-4); }.border-primary { border-color: var(--primary); }.border-primary-l-1 { border-color: var(--primary-l-1); }.border-primary-l-2 { border-color: var(--primary-l-2); }.border-primary-l-3 { border-color: var(--primary-l-3); }.border-primary-l-4 { border-color: var(--primary-l-4); }.border-primary-t-1 { border-color: var(--primary-t-1); }.border-primary-t-2 { border-color: var(--primary-t-2); }.border-primary-t-3 { border-color: var(--primary-t-3); }.border-primary-t-4 { border-color: var(--primary-t-4); }.fill-primary { fill: var(--primary); }.fill-primary-l-1 { fill: var(--primary-l-1); }.fill-primary-l-2 { fill: var(--primary-l-2); }.fill-primary-l-3 { fill: var(--primary-l-3); }.fill-primary-l-4 { fill: var(--primary-l-4); }.fill-primary-t-1 { fill: var(--primary-t-1); }.fill-primary-t-2 { fill: var(--primary-t-2); }.fill-primary-t-3 { fill: var(--primary-t-3); }.fill-primary-t-4 { fill: var(--primary-t-4); }