.displayXl {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-display-xl);
    letter-spacing: var(--letter-spacing-negative-xxl);
}

.displayLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-display-lg);
}

.displayMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-display-md);
}

.displaySm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-display-sm);
}

.displayXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-display-xs);
}

.headingXl {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-xl);
}

.headingLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-lg);
}

.headingMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-negative-xl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-md);
}

.headingSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-sm);
    letter-spacing: var(--letter-spacing-negative-xl);
}

.headingXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-xs);
    letter-spacing: var(--letter-spacing-negative-lg);
}

.headingXxs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-xxs);
    letter-spacing: var(--letter-spacing-negative-lg);
}

.preambleLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-lg);
}

.preambleMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxl);
}

.preambleSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xl);
}

.bodyXl,
.bodyLg,
.bodyMd,
.bodySm,
.bodyXs,
.bodyXxs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
}

.bodyXl {
    font-family: var(--font-default), sans-serif;
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-xl);
}

.bodyLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-lg);
}

.bodyMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-md);
}

.bodySm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-negative-md);
}

.bodyXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-negative-sm);
}

.bodyXxs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxs);
    letter-spacing: var(--letter-spacing-negative-sm);
}

.linkLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-lg);
}

.linkMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-md);
}

.linkSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-sm);
}

.linkXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xs);
}

.linkLg,
.linkMd,
.linkSm,
.linkXs {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
}

.labelXl {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-lg);
}

.labelLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-md);
}

.labelMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-md);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-sm);
}

.labelSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xs);
}

.labelXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-null);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxs);
}

.labelXxs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-null);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxxs);
}

.labelEmphasis {
    font-family: var(--font-decorative), monospace;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-xxl);
}

.labelEmphasis.labelXl,
.labelEmphasis.labelLg {
    letter-spacing: var(--letter-spacing-xl);
}

.profileXl {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xxl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-heading-lg);
}

.profileLg {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xxl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxl);
}

.profileMd {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xxl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-lg);
}

.profileSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xxl);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xs);
}

.profileXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxxs);
}

.weightRegular {
    font-weight: var(--font-weight-regular);
}

.weightMedium {
    font-weight: var(--font-weight-medium);
}

.leftAlign {
    text-align: left;
}

.centerAlign {
    text-align: center;
}

.rightAlign {
    text-align: right;
}

.strikethrough {
    text-decoration: line-through;
}

@media (width <= 768px) {
    .mobile__displayXl {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-display-xl);
        letter-spacing: var(--letter-spacing-negative-xxl);
    }

    .mobile__displayLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-display-lg);
    }

    .mobile__displayMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-display-md);
    }

    .mobile__displaySm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-display-sm);
    }

    .mobile__displayXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-display-xs);
    }

    .mobile__headingXl {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-xl);
    }

    .mobile__headingLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-lg);
    }

    .mobile__headingMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-xl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-md);
    }

    .mobile__headingSm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-sm);
        letter-spacing: var(--letter-spacing-negative-xl);
    }

    .mobile__headingXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-xs);
        letter-spacing: var(--letter-spacing-negative-lg);
    }

    .mobile__headingXxs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-xxs);
        letter-spacing: var(--letter-spacing-negative-lg);
    }

    .mobile__preambleLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-lg);
    }

    .mobile__preambleMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xxl);
    }

    .mobile__preambleSm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xl);
    }

    .mobile__bodyXl,
    .mobile__bodyLg,
    .mobile__bodyMd,
    .mobile__bodySm,
    .mobile__bodyXs,
    .mobile__bodyXxs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
    }

    .mobile__bodyXl {
        font-family: var(--font-default), sans-serif;
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-lg);
        line-height: var(--line-height-xl);
    }

    .mobile__bodyLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-lg);
    }

    .mobile__bodyMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-md);
    }

    .mobile__bodySm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-sm);
        letter-spacing: var(--letter-spacing-negative-md);
    }

    .mobile__bodyXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xs);
        letter-spacing: var(--letter-spacing-negative-sm);
    }

    .mobile__bodyXxs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-lg);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xxs);
        letter-spacing: var(--letter-spacing-negative-sm);
    }

    .mobile__linkLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-lg);
    }

    .mobile__linkMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-md);
    }

    .mobile__linkSm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-sm);
    }

    .mobile__linkXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-sm);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xs);
    }

    .mobile__linkLg,
    .mobile__linkMd,
    .mobile__linkSm,
    .mobile__linkXs {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
    }

    .mobile__labelXl {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-lg);
    }

    .mobile__labelLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-md);
    }

    .mobile__labelMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-md);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-sm);
    }

    .mobile__labelSm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-sm);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xs);
    }

    .mobile__labelXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-null);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xxs);
    }

    .labelEmphasis {
        font-family: var(--font-decorative), monospace;
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-xxl);
    }

    .labelEmphasis.mobile__labelXl,
    .labelEmphasis.mobile__labelLg {
        letter-spacing: var(--letter-spacing-xl);
    }

    .profileXl {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-xxl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-heading-lg);
    }

    .profileLg {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-xxl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xxl);
    }

    .profileMd {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-xxl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-lg);
    }

    .profileSm {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-xxl);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xs);
    }

    .profileXs {
        font-family: var(--font-default), sans-serif;
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-xs);
        font-weight: var(--font-weight-regular);
        font-style: normal;
        font-size: var(--font-size-xxxs);
    }

    .weightRegular {
        font-weight: var(--font-weight-regular);
    }

    .weightMedium {
        font-weight: var(--font-weight-medium);
    }
}

/* Gradient colors */
.neutral-gradient {
    --gradient-bg: linear-gradient(270deg, #666 -59.62%, #4D4D4D -6.95%, #262626 45.73%, #111016 100%);
}

.indigo-gradient {
    --gradient-bg: linear-gradient(276deg, #D3D4E0 -5.42%, #A8A9C1 8.16%, #7A87A6 21.75%, #496E8D 35.33%, #195675 48.92%, #13435B 62.5%, #0E3041 76.09%, #081D27 89.67%, #000 103.26%);
}

.solar-gradient {
    --gradient-bg: linear-gradient(72deg, var(--color-solar-500) 0%, var(--color-solar-400) 50%, var(--color-solar-300) 100%);
}

.orchre-gradient {
    --gradient-bg: linear-gradient(72deg, var(--color-orchre-500) 0%, var(--color-orchre-400) 50%, var(--color-orchre-300) 100%);
}

.lilac-gradient {
    --gradient-bg: linear-gradient(90deg, var(--color-lilac-500) -2.53%, var(--color-lilac-300) 54.58%, var(--color-lilac-200) 94.38%, var(--color-lilac-50) 121.21%);
}

.gradient {
    color: var(--color-text-primary);
    background: var(--gradient-bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}