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

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/hypinvest/poppins-extralight.woff2") format("woff2");
}

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

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

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

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hypinvest/poppins-semibold.woff2") format("woff2");
}

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

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/hypinvest/poppins-extrabold.woff2") format("woff2");
}

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

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

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

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

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hypinvest/quicksand-semibold.woff2") format("woff2");
}

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

:root {
    --base-fontface-title: Poppins, sans-serif;
    --base-fontface-body: Quicksand, sans-serif;
    --base-fontface-button: Quicksand, sans-serif;

    --base-font-transform: uppercase;

    --base-color-on-canvas-title: #001D51;

    --base-color-on-surface-title: #001D51;

    --base-color-inverse: #001D51;
    --base-color-on-inverse: #ffffff;
    --base-color-on-inverse-muted: #ffffff;
    --base-color-on-inverse-title: #ffffff;

    --base-color-link: #007497;
    --base-color-link-hover: #007497;

    --base-link-decoration: underline;

    --base-color-brand-primary: #FF5B54;
    --base-color-brand-primary-hover: #008BB4;
    --base-color-brand-primary-active: #008BB4;
    --base-color-brand-primary-border: #FF5B54;
    --base-color-brand-primary-border-hover: #006F90;
    --base-color-on-brand-primary: #000000;
    --base-color-on-brand-primary-hover: #000000;

    --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: #FF5B54;
    --base-color-brand-outline-active: transparent;
    --base-color-brand-outline-border: #FF5B54;
    --base-color-brand-outline-border-hover: #FF5B54;
    --base-color-on-brand-outline: #000000;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #ff5a52;

    --base-radius-interactive: 999px;
    --base-radius-surface: 0 1rem 1 rem 1 rem;

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