:root,
[data-neutral="color-neutral"]{
    --color-black: #2C2D35;
    --color-white: #ffffff;
    --color-red: #FF1B1B;
    --color-gray: #E3E5EF
}

:root,
[data-gray="gray"]{
    --swg-25: #fafbfe;
    --swg-50: #f4f5f9;
    --swg-100: #ebedf4;
    --swg-200: #e3e5ef;
    --swg-300: #c4c7dd;
    --swg-400: #acaecd;
    --swg-500: #9696be;
    --swg-600: #837fac;
    --swg-700: #706c96;
    --swg-800: #5c597a;
    --swg-900: #4e4c63;
    --swg-950: #2d2c3a;
}

:root,
[data-purple-primary="purple-primary"]{
    --swp-50: #ecefff;
    --swp-100: #dce1ff;
    --swp-200: #bfc5ff;
    --swp-300: #999fff;
    --swp-400: #7470ff;
    --swp-500: #614fff;
    --swp-600: #5530fb;
    --swp-700: #4c27df;
    --swp-800: #3b20b3;
    --swp-900: #33228d;
    --swp-950: #201452;
}

:root,
[data-jacarta-primary="jacarta-primary"]{
    --swj-50: #f2f2fc;
    --swj-100: #e2e4f7;
    --swj-200: #cbcef2;
    --swj-300: #a8b0e8;
    --swj-400: #7e87dc;
    --swj-500: #6063d1;
    --swj-600: #504cc4;
    --swj-700: #4d42b3;
    --swj-800: #453b92;
    --swj-900: #302b62;
    --swj-950: #282348;
}

:root,
[data-spacing-digits="spacing-digits"]{
    --digit-0: 0px;
    --digit-0rem: 0rem;
    --digit-1: 1px;
    --digit-1rem: 0.063rem;
    --digit-2: 2px;
    --digit-2rem: 0.125rem;
    --digit-3: 3px;
    --digit-3rem: 0.188rem;
    --digit-4: 4px;
    --digit-4rem: 0.25rem;
    --digit-5: 5px;
    --digit-5rem: 0.313rem;
    --digit-6: 6px;
    --digit-6rem: 0.375rem;
    --digit-7: 7px;
    --digit-7rem: 0.438rem;
    --digit-8: 8px;
    --digit-8rem: 0.5rem;
    --digit-9: 9px;
    --digit-9rem: 0.563rem;
    --digit-10: 10px;
    --digit-10rem: 0.625rem;
    --digit-11: 11px;
    --digit-11rem: 0.688rem;
    --digit-12: 12px;
    --digit-12rem: 0.75rem;
    --digit-13: 13px;
    --digit-13rem: 0.813rem;
    --digit-14: 14px;
    --digit-14rem: 0.875rem;
    --digit-15: 15px;
    --digit-15rem: 0.938rem;
    --digit-16: 16px;
    --digit-16rem: 1rem;
}

:root,
[data-spacing-m4="spacing-m4"]{
    --m4-4: 4px; 
    --m4-4rem: 0.25rem;
    --m4-8: 8px;
    --m4-8rem: 0.5rem;
    --m4-12: 12px;
    --m4-12rem: 0.75rem;
    --m4-16: 16px;
    --m4-16rem: 1rem;
    --m4-20: 20px;
    --m4-20rem: 1.25rem;
    --m4-24: 24px;
    --m4-24rem: 1.5rem;
    --m4-28: 28px;
    --m4-28rem: 1.75rem;
    --m4-32: 32px;
    --m4-32rem: 2rem;
    --m4-36: 36px;
    --m4-36rem: 2.25rem;
    --m4-40: 40px;
    --m4-40rem: 2.5rem;
    --m4-44: 44px;
    --m4-44rem: 2.75rem;
    --m4-48: 48px;
    --m4-48rem: 3rem;
    --m4-52: 52px;
    --m4-52rem: 3.25rem;
    --m4-56: 56px;
    --m4-56rem: 3.5rem;
    --m4-60: 60px;
    --m4-60rem: 3.75rem;
    --m4-64: 64px;
    --m4-64rem: 4rem;
    --m4-68: 68px;
    --m4-48rem: 4.25rem;
    --m4-72: 72px;
    --m4-72rem: 4.5rem;
    --m4-76: 76px;
    --m4-76rem: 4.75rem;
    --m4-80: 80px;
    --m4-80rem: 5rem;
    --m4-84: 84px;
    --m4-84rem: 5.25rem;
}

.swp-50{
    color: var(--swp-50) !important;
}
.swp-100{
    color: var(--swp-100) !important;
}
.swp-200{
    color: var(--swp-200) !important;
}
.swp-300{
    color: var(--swp-300) !important;
}
.brand-blue{
    color: var(--swp-400) !important;
}
.swp-400{
    color: var(--swp-400) !important;
}
.swp-500{
    color: var(--swp-500) !important;
}
.swp-600{
    color: var(--swp-600) !important;
}
.swp-700{
    color: var(--swp-700) !important;
}
.swp-800{
    color: var(--swp-800) !important;
}
.swp-900{
    color: var(--swp-900) !important;
}
.swp-950{
    color: var(--swp-950) !important;
}

.swj-50{
    color: var(--swj-50) !important;
}
.swj-100{
    color: var(--swj-100) !important;
}
.swj-200{
    color: var(--swj-200) !important;
}
.swj-300{
    color: var(--swj-300) !important;
}
.brand-stratos{
    color: var(--swj-400) !important;
}
.swj-400{
    color: var(--swj-400) !important;
}
.swj-500{
    color: var(--swj-500) !important;
}
.swj-600{
    color: var(--swj-600) !important;
}
.swj-700{
    color: var(--swj-700) !important;
}
.swj-800{
    color: var(--swj-800) !important;
}
.swj-900{
    color: var(--swj-900) !important;
}
.swj-950{
    color: var(--swj-950) !important;
}

.swg-50{
    color: var(--swg-50) !important;
}
.swg-100{
    color: var(--swg-100) !important;
}
.swg-200{
    color: var(--swg-200) !important;
}
.swg-300{
    color: var(--swg-300) !important;
}
.swg-400{
    color: var(--swg-400) !important;
}
.swg-500{
    color: var(--swg-500) !important;
}
.swg-600{
    color: var(--swg-600) !important;
}
.swg-700{
    color: var(--swg-700) !important;
}
.swg-800{
    color: var(--swg-800) !important;
}
.swg-900{
    color: var(--swg-900) !important;
}
.swg-950{
    color: var(--swg-950) !important;
}

/* Start bg */

.bg-swp-50{
    background-color: var(--swp-50) !important;
}
.bg-swp-100{
    background-color: var(--swp-100) !important;
}
.bg-swp-200{
    background-color: var(--swp-200) !important;
}
.bg-swp-300{
    background-color: var(--swp-300) !important;
}
.brand-blue{
    background-color: var(--swp-400) !important;
}
.bg-swp-400{
    background-color: var(--swp-400) !important;
}
.bg-swp-500{
    background-color: var(--swp-500) !important;
}
.bg-swp-600{
    background-color: var(--swp-600) !important;
}
.bg-swp-700{
    background-color: var(--swp-700) !important;
}
.bg-swp-800{
    background-color: var(--swp-800) !important;
}
.bg-swp-900{
    background-color: var(--swp-900) !important;
}
.bg-swp-950{
    background-color: var(--swp-950) !important;
}

.bg-swj-50{
    background-color: var(--swj-50) !important;
}
.bg-swj-100{
    background-color: var(--swj-100) !important;
}
.bg-swj-200{
    background-color: var(--swj-200) !important;
}
.bg-swj-300{
    background-color: var(--swj-300) !important;
}
.brand-stratos{
    background-color: var(--swj-400) !important;
}
.bg-swj-400{
    background-color: var(--swj-400) !important;
}
.bg-swj-500{
    background-color: var(--swj-500) !important;
}
.bg-swj-600{
    background-color: var(--swj-600) !important;
}
.bg-swj-700{
    background-color: var(--swj-700) !important;
}
.bg-swj-800{
    background-color: var(--swj-800) !important;
}
.bg-swj-900{
    background-color: var(--swj-900) !important;
}
.bg-swj-950{
    background-color: var(--swj-950) !important;
}

.bg-swg-50{
    background-color: var(--swg-50) !important;
}
.bg-swg-100{
    background-color: var(--swg-100) !important;
}
.bg-swg-200{
    background-color: var(--swg-200) !important;
}
.bg-swg-300{
    background-color: var(--swg-300) !important;
}
.bg-swg-400{
    background-color: var(--swg-400) !important;
}
.bg-swg-500{
    background-color: var(--swg-500) !important;
}
.bg-swg-600{
    background-color: var(--swg-600) !important;
}
.bg-swg-700{
    background-color: var(--swg-700) !important;
}
.bg-swg-800{
    background-color: var(--swg-800) !important;
}
.bg-swg-900{
    background-color: var(--swg-900) !important;
}
.bg-swg-950{
    background-color: var(--swj-950) !important;
}

.color-red,
.color-red span {
    color: var(--color-red) !important
}
.color-black{
    color: var(--color-black) !important;
}
.color-white{
    color: var(--color-white) !important;
}
.bg-grad-light{
    background: linear-gradient(142deg, rgba(246, 244, 255, 1) 0%, rgba(255, 236, 247, 0.33) 100%);
}