/* Design system */

:root {
    /* inspiration for the naming conventions: https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd */

    --susy-text-base-size: 1rem;

    --susy-text-xxxxs: 0.5625rem; /*9px*/
    --susy-text-xxxs: 0.625rem; /*10px*/
    --susy-text-xxs: 0.75rem; /*12px*/
    --susy-text-xs: 0.8125rem; /*13px*/
    --susy-text-sm: 0.875rem; /*14px*/
    --susy-text-md: 1.125rem; /*18px*/
    --susy-text-lg: 1.25rem; /*20px*/
    --susy-text-xl: 1.375rem; /*22px*/
    --susy-text-xxl: 1.5rem; /*24px*/
    --susy-text-xxxl: 1.75rem; /*28px*/
    --susy-text-xxxxl: 2rem; /*32px*/
}

h1,
.susy-h1 {
    font-weight: 700;
    font-size: var(--susy-text-xxxxl);
    line-height: 2; /* 32px */
    letter-spacing: -2%;
}

h2,
.susy-h2 {
    font-weight: 500;
    font-size: var(--susy-text-xxl);
    line-height: 2; /* 32px */
    letter-spacing: -2%;
}

h3,
.susy-h3 {
    font-weight: 700;
    font-size: var(--susy-text-lg);
    line-height: 1.5;
    letter-spacing: -1%;
    margin-bottom: 0.7rem;
}

h4,
.susy-h4 {
    font-weight: 500;
    font-size: var(--susy-text-base-size);
    line-height: 1.5;
    letter-spacing: -0.02em;
    margin-bottom: 0.7rem;
}

.susy-caption {
    font-weight: 700;
    font-size: var(--susy-text-md);
    line-height: 1.25; /* 20px */
}

.susy-subtitle-1 {
    font-weight: 600;
    font-size: var(--susy-text-sm);
    line-height: var(--susy-text-md);
    letter-spacing: -1%;
}

.susy-subtitle-2 {
    font-weight: 400;
    font-size: var(--susy-text-sm);
    line-height: 1.5; /* 24px */
    letter-spacing: -3%;
}

.susy-body-1-paragraph {
    font-weight: 700;
    font-size: var(--susy-text-xs);
    line-height: 1.5; /* 150% */
}

.susy-body-2-paragraph {
    font-weight: 400;
    font-size: var(--susy-text-xs);
    line-height: 1.5;
}

.susy-body-3-small-paragraph {
    font-weight: 300;
    font-size: var(--susy-text-xxs);
    line-height: var(--susy-text-md);
}

.susy-headline-small {
    font-weight: 500;
    font-size: var(--susy-text-sm);
    line-height: var(--susy-text-lg);
}

.susy-input-label {
    font-weight: 400;
    font-size: var(--susy-text-sm);
    line-height: var(--susy-text-xl);
}

.susy-input-text {
    font-weight: 400;
    font-size: var(--susy-text-sm);
    line-height: 1.5; /* 24px */
    letter-spacing: -3%;
}

.susy-placeholder {
    font-weight: 400;
    font-size: var(--susy-text-sm);
    line-height: 1.5; /* 24px */
    letter-spacing: -3%;
}

/* END Design system */

/* Legacy styles */

.susy-label {
    color: var(--susy-secondary-color-200);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}

.susy-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--susy-secondary-color-200);
}

.susy-label-not-bolded {
    font-size: 14px;
    font-weight: 400;
    color: var(--susy-secondary-color-200);
}

.susy-label-muted {
    font-weight: 400;
    opacity: 0.5;
}

.susy-label-sm-bold {
    font-size: 13px;
    font-weight: 500;
    color: var(--susy-secondary-color-200);
}

.susy-label-sm-extra-bold {
    font-size: 13px;
    font-weight: 700;
}

.susy-label-xs-muted {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.5;
}

.susy-label-xs {
    font-size: 12px;
    font-weight: 400;
}

.susy-normal-text {
    font-size: 14px;
    font-weight: 400;
}

.susy-sm-text {
    font-size: 12px;
    color: var(--susy-secondary-color-200);
}

/* END Legacy styles */