:root,
::after,
::before {
    --neutral-900: 13, 15, 16;
    --neutral-800: 24, 24, 24;
    --neutral-700: 43, 43, 43;
    --neutral-600: 68, 68, 68;
    --neutral-500: 97, 97, 97;
    --neutral-400: 131, 131, 131;
    --neutral-300: 157, 157, 157;
    --neutral-200: 176, 176, 176;
    --neutral-100: 201, 201, 201;
    --neutral-50: 222, 222, 222;
    --neutral-1000: 0, 0, 0;
    --neutral-0: 255, 255, 255;
    --brand-900: 31, 7, 0;
    --brand-800: 70, 17, 0;
    --brand-700: 104, 25, 0;
    --brand-600: 138, 33, 0;
    --brand-500: 172, 49, 10;
    --brand-400: 206, 67, 23;
    --brand-300: 240, 89, 41;
    --brand-200: 255, 130, 91;
    --brand-100: 255, 166, 139;
    --brand-50: 255, 203, 186;
    --accent-900: 15, 22, 46;
    --accent-800: 27, 35, 103;
    --accent-700: 30, 41, 141;
    --accent-600: 49, 73, 198;
    --accent-500: 70, 103, 220;
    --accent-400: 114, 150, 245;
    --accent-300: 155, 177, 255;
    --accent-200: 179, 191, 255;
    --accent-100: 205, 213, 255;
    --accent-50: 224, 227, 255;
    --accent-variant-900: 37, 28, 20;
    --accent-variant-800: 75, 59, 44;
    --accent-variant-700: 101, 80, 61;
    --accent-variant-600: 126, 101, 80;
    --accent-variant-500: 152, 124, 99;
    --accent-variant-400: 177, 146, 119;
    --accent-variant-300: 203, 169, 140;
    --accent-variant-200: 228, 193, 162;
    --accent-variant-100: 254, 217, 185;
    --accent-variant-50: 255, 235, 217;
    --info-900: 24, 60, 80;
    --info-800: 36, 83, 109;
    --info-700: 49, 106, 138;
    --info-600: 65, 130, 168;
    --info-500: 82, 155, 197;
    --info-400: 101, 181, 226;
    --info-300: 121, 207, 255;
    --info-200: 161, 221, 255;
    --info-100: 201, 235, 255;
    --info-50: 241, 250, 255;
    --error-900: 131, 20, 20;
    --error-800: 133, 0, 0;
    --error-700: 173, 0, 0;
    --error-600: 214, 0, 0;
    --error-500: 255, 0, 0;
    --error-400: 255, 46, 46;
    --error-300: 255, 92, 92;
    --error-200: 255, 138, 138;
    --error-100: 255, 183, 183;
    --error-50: 255, 229, 229;
    --success-900: 0, 103, 17;
    --success-800: 0, 144, 23;
    --success-700: 0, 185, 30;
    --success-600: 21, 226, 54;
    --success-500: 47, 255, 80;
    --success-400: 85, 255, 112;
    --success-300: 122, 255, 143;
    --success-200: 159, 255, 175;
    --success-100: 197, 255, 206;
    --success-50: 234, 255, 237;
    --primary: --neutral-100;
}

.tp-headline-xxl {
    font-size: 72px !important;
    font-weight: 500 !important;
    line-height: 82px !important;
    letter-spacing: -0.02em !important;
}

.tp-headline-xl {
    font-size: 56px !important;
    font-weight: 500 !important;
    line-height: 64px !important;
    letter-spacing: -0.02em !important;
}

.tp-headline-l {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 58px !important;
    letter-spacing: -0.02em !important;
}

.tp-headline-m {
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 52px !important;
    letter-spacing: 0;
}

.tp-headline-s {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: 0;
}

.tp-sub-headline {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    letter-spacing: 0;
}

.tp-body {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.02em !important;
}

.tp-body-bold {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0.02em !important;
}

.tp-body-s {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.02em !important;
}

.tp-body-s-bold {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0.02em !important;
}

.tp-body-xs {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
}

.tp-body-xs-bold {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
}

.tp-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0.02em !important;
}

.tp-link {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.02em !important;
}

.tp-link-s {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0.02em !important;
}

.tp-link-xs {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
}

/* Content */
.content-primary { color: rgb(var(--neutral-0)) !important; }
.content-secondary { color: rgb(var(--neutral-300)) !important; }
.content-tertiary { color: rgb(var(--accent-100)) !important; }
.content-disabled { color: rgb(var(--neutral-600)) !important; }
.content-on-light { color: rgb(var(--neutral-1000)) !important; }
.content-brand { color: rgb(var(--brand-300)) !important; }
.content-negative { color: rgb(var(--error-300)) !important; }
.content-accent { color: rgb(var(--accent-400)) !important; }

/* Background */
.background-primary { background-color: rgb(var(--neutral-900)); }
.background-secondary { background-color: rgb(var(--neutral-0)); }
.background-surface { background-color: rgb(var(--neutral-800)); }
.background-surface-brand { background-color: rgb(var(--brand-300)); }
.background-surface-disabled { background-color: rgb(var(--neutral-700)); }
.background-surface-secondary { background-color: rgb(var(--neutral-800)); }
.background-accent { background-color: rgb(var(--accent-400)); }
.background-accent-secondary { background-color: rgb(var(--accent-variant-600)); }
.background-error { background-color: rgb(var(--error-300)); }

/* Border */
.border-brand { border-color: rgb(var(--brand-300)); }
.border-primary { border-color: rgb(var(--neutral-0)); }
.border-secondary { border-color: rgb(var(--neutral-600)); }
.border-tertiary { border-color: rgb(var(--neutral-300)); }
.border-disabled { border-color: rgb(var(--neutral-700)); }
.border-negative { border-color: rgb(var(--error-300)); }

/* Informational */
.informational-negative { background-color: rgb(var(--error-300)); }
.informational-success { background-color: rgb(var(--success-300)); }
.informational-info { background-color: rgb(var(--info-400)); }
.informational-accent { background-color: rgb(var(--accent-400)); }
.informational-accent-secondary { background-color: rgb(var(--accent-variant-600)); }