@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: 'Roboto', sans-serif;
    --font-style-normal: normal;
    /* Font size */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-medium: 16px;
    --font-size-large: 20px;
    --font-size-extra-large: 26px;

    /* Line height */
    --line-height-28: 28px;
    --line-height-22: 22px;
    --line-height-20: 20px;
    --line-height-16: 16px;
    /* Font weight */
    --font-weight-normal: 400;
    --font-weight-light-bold: 500;
    --font-weight-extra-bold: 800;
    /* Letter spacing */
    --letter-spacing-0-4: 0.4px;
    --letter-spacing-0-5: 0.5px;
    --letter-spacing-1-0: 1.0px;
    --letter-spacing-1-25: 1.25px;
}

body {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-grey-900));
}

code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-light-bold);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-base-pink));
}

.en-typography-attention {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-extra-bold);
    font-size: var(--font-size-extra-large);
    line-height: var(--line-height-28);
    letter-spacing: var(--letter-spacing-1-0);
    color: rgb(var(--en-grey-900));
}

.en-typography-h1, h1 {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-large);
    line-height: var(--line-height-28);
    letter-spacing: var(--letter-spacing-0-5);
    color: rgb(var(--en-grey-900));
}

.en-typography-h2, h2 {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-28);
    letter-spacing: var(--letter-spacing-0-5);
    color: rgb(var(--en-grey-900));
}

.en-typography-button {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-light-bold);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-1-25);
    color: rgb(var(--en-grey-900));
    text-transform: uppercase;
}

.en-typography-menu {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-light-bold);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-1-25);
    color: rgb(var(--en-grey-900));
    text-transform: uppercase;
}

.en-typography-links {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-primary));
    text-decoration: underline;
}

.en-typography-label, label {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-light-bold);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-22);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-grey-900));
}

.en-typography-body {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-20);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-grey-900));
}

.en-typography-subtext {
    font-family: var(--font-family);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: var(--line-height-16);
    letter-spacing: var(--letter-spacing-0-4);
    color: rgb(var(--en-grey-900));
}

.en-typography-white-text {
    color: rgb(var(--en-white));
}

.en-typography-blue-text {
    color: rgb(var(--en-primary));
}

.en-typography-grey-text {
    color: rgb(var(--en-grey-700));
}

.en-typography-disabled-text {
    color: rgb(var(--en-grey-300));
}

.en-typography-black-text {
    color: rgb(var(--en-grey-900));
}