:root {
    --base-white: #FFFFFF;
    --base-black: #000000;

    /* grey colors */
    --hotspot-grey_50: #F9FAFB;
    --hotspot-grey_100: #F3F4F6;
    --hotspot-grey_200: #E8EAED;
    --hotspot-grey_300: #D1D5DB;
    --hotspot-grey_400: #9CA3AF;
    --hotspot-grey_500: #687080;
    --hotspot-grey_600: #4B5563;
    --hotspot-grey_700: #374151;
    --hotspot-grey_800: #1F2937;
    --hotspot-grey_900: #111827;
    --hotspot-grey_950: #030712;

    /* brand colors */
    --hotspot-brand_50: #FBF2F2;
    --hotspot-brand_100: #F8E7E7;
    --hotspot-brand_200: #F1CDCC;
    --hotspot-brand_300: #E9AEAD;
    --hotspot-brand_400: #E18988;
    --hotspot-brand_500: #D52620;
    --hotspot-brand_600: #CB241F;
    --hotspot-brand_700: #B6201B;
    --hotspot-brand_800: #9D1C18;
    --hotspot-brand_900: #811713;
    --hotspot-brand_950: #5B100E;

    /* success colors */
    --hotpsot-success_50: #ECFDF5;
    --hotspot-success_100: #D1FAE5;
    --hotspot-success_200: #A7F3D0;
    --hotspot-success_300: #6EE7B7;
    --hotspot-success_400: #34D399;
    --hotspot-success_500: #10B981;
    --hotspot-success_600: #059669;
    --hotspot-success_700: #047857;
    --hotspot-success_800: #065F46;
    --hotspot-success_900: #064E3B;
    --hotspot-success_950: #022C22;

    /* danger colors */
    --hotspot-danger_50: #FEF2F2;
    --hotspot-danger_100: #FEE2E2;
    --hotspot-danger_200: #FECACA;
    --hotspot-danger_300: #FCA5A5;
    --hotspot-danger_400: #F87171;
    --hotspot-danger_500: #EF4444;
    --hotspot-danger_600: #DC2626;
    --hotspot-danger_700: #B91C1C;
    --hotspot-danger_800: #991B1B;
    --hotspot-danger_900: #7F1D1D;
    --hotspot-danger_950: #450A0A;

    /* warning colors */
    --hotspot-warning_50: #FEFCE8;
    --hotspot-warning_100: #FEF9C3;
    --hotspot-warning_200: #FEF08A;
    --hotspot-warning_300: #FDE047;
    --hotspot-warning_400: #FACC15;
    --hotspot-warning_500: #EAB308;
    --hotspot-warning_600: #CA8A04;
    --hotspot-warning_700: #A16207;
    --hotspot-warning_800: #854D0E;
    --hotspot-warning_900: #713F12;
    --hotspot-warning_950: #422006;

    /* info colors */
    --hotspot-info_50: #EFF6FF;
    --hotspot-info_100: #DBEAFE;
    --hotspot-info_200: #BFDBFE;
    --hotspot-info_300: #93C5FD;
    --hotspot-info_400: #60A5FA;
    --hotspot-info_500: #3B82F6;
    --hotspot-info_600: #2563EB;
    --hotspot-info_700: #1D4ED8;
    --hotspot-info_800: #1E40AF;
    --hotspot-info_900: #1E3A8A;
    --hotspot-info_950: #172554;
}

/* text colors */
.text-white {
    color: var(--base-white);
}
.text-grey-400 {
    color: var(--hotspot-grey_400);
}
.text-grey-500 {
    color: var(--hotspot-grey_500);
}
.text-grey-600 {
    color: var(--hotspot-grey_600);
}
.text-grey-700 {
    color: var(--hotspot-grey_700);
}
.text-grey-800 {
    color: var(--hotspot-grey_800);
}
.text-grey-900 {
    color: var(--hotspot-grey_900);
}
.text-grey-950 {
    color: var(--hotspot-grey_950);
}
.text-info-700 {
    color: var(--hotspot-info_700);
}
.text-info-600 {
    color: var(--hotspot-info_600);
}
.text-warning-600 {
    color: var(--hotspot-warning_600);
}
.text-warning-700 {
    color: var(--hotspot-warning_700);
}
.text-warning-800 {
    color: var(--hotspot-warning_800);
}
.text-danger-500 {
    color: var(--hotspot-danger_500);
}
.text-danger-600 {
    color: var(--hotspot-danger_600);
}
.text-success-700 {
    color: var(--hotspot-success_700);
}
.text-brand-500 {
    color: var(--hotspot-brand_500);
}

/* background colors */
.bg-info-50 {
    background-color: var(--hotspot-info_50);
}
.bg-info-100 {
    background-color: var(--hotspot-info_100);
}
.bg-info-200 {
    background-color: var(--hotspot-info_200);
}
.bg-warning-100 {
    background-color: var(--hotspot-warning_100);
}
.bg-warning-600 {
    background-color: var(--hotspot-warning_600);
}
.bg-brand-50 {
    background-color: var(--hotspot-brand_50);
}
.bg-brand-100 {
    background-color: var(--hotspot-brand_100);
}
.bg-success-100 {
    background-color: var(--hotspot-success_100);
}
.bg-success-700 {
    background-color: var(--hotspot-success_700);
}
.bg-danger-100 {
    background-color: var(--hotspot-danger_100);
}
.bg-danger-200 {
    background-color: var(--hotspot-danger_200);
}
.bg-danger-500 {
    background-color: var(--hotspot-danger_500);
}
.bg-grey-50 {
    background-color: var(--hotspot-grey_50);
}
.bg-grey-100 {
    background-color: var(--hotspot-grey_100);
}
.bg-grey-300 {
    background-color: var(--hotspot-grey_300);
}
.bg-grey-800 {
    background-color: var(--hotspot-grey_800);
}
.bg-grey-950 {
    background-color: var(--hotspot-grey_950);
}