.color-p1{
    color: var(--color-p1);
}
.color-p2{
    color: var(--color-p2);
}
.color-p3 {
    color: var(--color-p1) !important;
}
.color-n1{
    color: var(--color-n1);
}
.color-n2{
    color: var(--color-n2);
}
.color-n3{
    color: var(--color-n3);
}
.color-n4{
    color: var(--color-n4);
}
.color-n5{
    color: var(--color-n5);
}
.color-n6{
    color: var(--color-n6);
}
.color-n7{
    color: var(--color-n7);
}
.color-n8{
    color: var(--color-n8);
}
.color-n9{
    color: var(--color-n9);
}
.bg-p1 {
    background-color: var(--color-p1);
}
.bg-p2 {
    background-color: var(--color-p2);
}
.bg-p3 {
    background-color: var(--color-p3) !important;
}
.bg-n7 {
    background-color: var(--color-n7);
}
.bg-n8{
    background-color: var(--color-n8);
}
.bg-n9{
    background-color: var(--color-n9);
}
.bg-n10{
    background-color: var(--color-n10);
}
.bg-p1{
    background-color: var(--color-p1) !important;
}
.font-5xl{
    font-size: var(--size-5xl);
}
.font-heading-1 {
    font-size: var(--size-4xl);
}
.font-heading-2{
    font-size: var(--size-3xl);;
}
.font-heading-3{
    font-size: var(--size-2xl);
}
.font-heading-4{
    font-size: var(--size-xl);
}
.font-body{
    font-size: var(--size-md);
}
.font-caption{
    font-size: var(--size-xs);
}
.font-label{
    font-size: var(--size-sm);
}
.font-button-sm{
    font-size: var(--size-sm);
}
.fw-400{
    font-weight: 400;
}
.fw-600{
    font-weight: 600;
}
.end-40{
    position: absolute;
    left: var(--size-4xl);
}
.w-48{
    width: var(--size-5xl);
}
.h-48{
    height: var(--size-5xl);
}
.h-24{
    height: var(--size-2xl);
}