/**
 * This file specifies styling for text elements.
 * A line height of 16px is assumed for calculating the rem values.
 */

:root {
    --fonts--size--small: 0.75rem;          /* 12px */
    --fonts--size--medium: 0.875rem;        /* 14px */
    --fonts--size--large: 1rem;             /* 16px */
    --fonts--size--x-large: 1.5rem;         /* 24px */
    --fonts--size--xx-large: 2.25rem;       /* 36px */

    --fonts--weight--regular: 400;
    --fonts--weight--medium-bold: 500;
    --fonts--weight--bold: 600;
    --fonts--weight--x-bold: 700;
}

/* Usage: Status page headers */
.fonts__title--large {
    font-style: normal;
    font-weight: var(--fonts--weight--x-bold);
    font-size: var(--fonts--size--xx-large);
}

/* Usage: Content header */
.fonts__title--medium {
    font-style: normal;
    font-weight: var(--fonts--weight--medium-bold);
    font-size: var(--fonts--size--x-large);
}

/* Usage: input labels, error messages, language selector label */
.fonts__label--regular {
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    font-size: var(--fonts--size--medium);
}

/* Usage: hyperlinks */
.fonts__label--regular--bold {
    font-style: normal;
    font-weight: var(--fonts--weight--medium-bold);
    font-size: var(--fonts--size--medium);
}

/* Usage: input labels */
.fonts__label--small {
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    font-size: var(--fonts--size--small);
}

/* Usage: button labels */
.fonts__button__label {
    font-style: normal;
    font-weight: var(--fonts--weight--medium-bold);
    font-size: var(--fonts--size--large);
}

.fonts__text--regular {
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    font-size: var(--fonts--size--large);
}