:root {
    --sans-serif: 'Source Sans 3', sans-serif;
    --font-color: #8a8a8a;
    --font-color-dark: #8a8a8a;

    --bs-body-font-family: 'Source Sans 3', sans-serif;
    --bs-body-font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

[data-bs-theme="light"] {
    --font-color-primary: #77aa3c;
    --font-color-secondary:  #0769a3;
    --font-color-accent: #7463D9;
    --font-color-alert: #D92B04;
    --font-color-info: #FFBB44;

    --font-color-neutral1: #353535;
    --font-color-neutral2: #ffffff;
    --font-color-neutral4:  #8a8a8a;
    --font-color-neutral7: #1A1718;
}

[data-bs-theme="dark"] {
    --font-color-primary: #a2e05b;
    --font-color-secondary: #5ec6ff;
    --font-color-accent: #B1A5FF;
    --font-color-alert: #FF6757;
    --font-color-info: #FFBB44;

    --font-color-neutral1: #ffffff;
    --font-color-neutral2: #353535;
    --font-color-neutral4:  #bcbcbc;
    --font-color-neutral7: #ffffff;
}


.dsgn-font-color-primary { color: var(--font-color-primary); }
.dsgn-font-color-secondary { color: var(--font-color-secondary); }
.dsgn-font-color-secondary-dark { color: #5ec6ff; }

.dsgn-font-color-accent { color: var(--font-color-accent); }
.dsgn-font-color-alert { color: var(--font-color-alert); }
.dsgn-font-color-alert-dark { color: #FF6757; }

.dsgn-font-color-info { color: var(--font-color-info); }

.dsgn-font-color-neutral1 { color: var(--font-color-neutral1); }
.dsgn-font-color-neutral2 { color: var(--font-color-neutral2); }
.dsgn-font-color-neutral4 { color: var(--font-color-neutral4); }
.dsgn-font-color-neutral7 { color: var(--font-color-neutral7); }

.dsgn-font-color-white { color: #ffffff; }
.dsgn-font-color-dark { color: #1A1718; }


.dsgn-font-chunky-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    font-stretch: normal;
    font-size: 60px;
    line-height: 52px;
    font-family: var(--sans-serif);
}

.dsgn-font-ad-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 53px;
    line-height: 57px;
    font-family: var(--sans-serif);
}

.dsgn-font-md-chunky {
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    font-stretch: normal;
    font-size: 42px;
    line-height: 32px;
    font-family: var(--sans-serif);
}

.dsgn-font-lg-page-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 42px;
    line-height: 46px;
    font-family: var(--sans-serif);
}

.dsgn-font-page-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 32px;
    line-height: 40.22px;
    font-family: var(--sans-serif);
}

.dsgn-font-product-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 28px;
    line-height: 32px;
    font-family: var(--sans-serif);
}

.dsgn-font-section-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 24px;
    line-height: 30.17px;
    font-family: var(--sans-serif);
}

.dsgn-font-section-large {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 24px;
    line-height: 30.17px;
    font-family: var(--sans-serif);
}

.dsgn-font-header {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 20px;
    line-height: 25.14px;
    font-family: var(--sans-serif);
}

.dsgn-font-large {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 20px;
    line-height: 25.14px;
    font-family: var(--sans-serif);
}

.dsgn-font-body {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 17px;
    line-height: 21.37px;
    font-family: var(--sans-serif);
}

.dsgn-font-body-emphasis {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 17px;
    line-height: 21.37px;
    font-family: var(--sans-serif);
}

.dsgn-font-detail {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 15px;
    line-height: 18.86px;
    font-family: var(--sans-serif);
}

.dsgn-font-detail-emphasis {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 15px;
    line-height: 18.86px;
    font-family: var(--sans-serif);
}

.dsgn-font-active-link, .font-over-active-link {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 17px;
    line-height: 21.37px;
    font-family: var(--sans-serif);
}

.dsgn-font-minor-detail, .font-minor-attention {
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    font-stretch: normal;
    font-size: 13px;
    line-height: 16.34px;
    font-family: var(--sans-serif);
}

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

.dsgn-fw-thin {
    font-weight: 350;
}

.dsgn-fw-semibold {
    font-weight: 500;
}

.dsgn-font-attention {
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    font-stretch: normal;
    font-size: 16px;
    line-height: 20.11px;
    font-family: var(--sans-serif);
}