@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-thin-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-light-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-regular-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-medium-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-bold-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-black-italic.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-thin.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-light.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-regular.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-medium.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-bold.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/rnhb/roboto-black.woff2") format('woff2');
}

:root {
    --base-fontface-title: "Roboto", sans-serif;
    --base-fontface-body: "Roboto", sans-serif;
    --base-fontface-button: "Roboto", sans-serif;

    --base-color-on-inverse: #000000;
    --base-color-on-inverse-muted: #000000;
    --base-color-on-inverse-title: #C63020;

    --base-color-link: #C63020;
    --base-color-link-hover: #C63020;
    --base-color-link-active: #C63020;
    --base-color-link-visited: #C63020;

    --base-color-brand-primary: #E35E4F;
    --base-color-brand-primary-hover: #DC3623;
    --base-color-brand-primary-active: #DC3623;
    --base-color-brand-primary-border: #E04A39;
    --base-color-brand-primary-border-hover: #BD2E1E;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-secondary: #5BC0DE;
    --base-color-brand-secondary-hover: #31B0D5;
    --base-color-brand-secondary-active: #31B0D5;
    --base-color-brand-secondary-border: #46B8DA;
    --base-color-brand-secondary-border-hover: #269ABC;
    --base-color-on-brand-secondary: #000000;
    --base-color-on-brand-secondary-hover: #000000;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #E35E4F;
    --base-color-brand-outline-active: #DC3623;
    --base-color-brand-outline-border: #E35E4F;
    --base-color-brand-outline-border-hover: #E35E4F;
    --base-color-on-brand-outline: #000000;
    --base-color-on-brand-outline-hover: #000000;

    --base-color-graph: #e35e4f;
    
    --base-radius-interactive: 1.5625rem;
    --base-radius-surface: 0.3125rem;

    --sds-header-link-fg-hover: var(--base-color-on-surface);
}