@font-face {
    font-family: 'FavoritPro-Regular';
    src: url('../assets/fonts/FavoritPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'RobotoVariable';
    src: url('../assets/fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


:root {
    --color-primary: #1a1f36;
    --color-primary-medium: #5e6272;
    --color-primary-light: #a3a5af;
    --color-black: #000000;
    --color-light: #ffffff;
    --color-light-05: rgba(255, 255, 255, 0.5);
    --color-grey: #555555;
    --color-secondary: #ff4f00;
    --color-secondary-medium: #fc8049;
    --color-secondary-light: #f9ece1;
    --color-border-1: #f3f3f3;
    --color-border-2: #e6e6e6;
    --color-border-3: #f3f4f5;
    --color-text-medium: #5e6272;
    --color-text-dark: #767986;
    --color-complementary-1: #8f00ff;
    --color-bg-messages: #f8f9fa;
    --box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px;
    --color-box-shadow: #f8f1fe;
    --color-transparent: transparent;
    --color-warning: #feb200;
    --color-danger: #f2292c;
    --color-success: #00b300;
    --eugenius-danger-color-default: #c90003;
    --eugenius-primary-color-e0: #e3dffd;
    --eugenius-primary-color-e1: #d3ccff;
    --eugenius-primary-color-e2: #b7abff;
    --eugenius-primary-color-e3: #9482ff;
    --eugenius-primary-color-e4: #6f58f8;
    --eugenius-primary-color-e5: #4f3ef3;
    --eugenius-primary-color-e6: #4629f2;
    --eugenius-primary-color-e7: #381dd8;
    --eugenius-primary-color-e8: #361fc1;
    --eugenius-grayscale-color-g2: #f5f5f5;
    --eugenius-grayscale-color-g3: #f0f0f0;
    --eugenius-grayscale-color-g4: #e0e0e0;
    --eugenius-grayscale-color-g7: #757575;
    --eugenius-grayscale-color-g8: #5d5d5d;
    --eugenius-grayscale-color-g9: #424242;
    --eugenius-grayscale-color-g10: #212121;
    --eugenius-primary-color-default: var(--eugenius-primary-color-e6);
    --eugenius-primary-color-hover: var(--eugenius-primary-color-e4);
    --eugenius-primary-color-active: var(--eugenius-primary-color-e7);
    --eugenius-primary-color-light-default: transparent;
    --eugenius-primary-color-light-hover: #6f58f814;
    --eugenius-primary-color-light-active: #381dd814;
    --insured-primary-color-0: #ffeced;
    --insured-primary-color-1: #ffd9d9;
    --insured-primary-color-2: #ffc6bd;
    --insured-primary-color-3: #ffa497;
    --insured-primary-color-4: #ea6f5d;
    --insured-primary-color-5: #ec0000;
    --insured-primary-color-6: #cc0000;
    --insured-primary-color-7: #990000;
    --insured-primary-color-8: #480000;
    --insured-primary-color-default: var(--insured-primary-color-5);
    --insured-primary-color-hover: var(--insured-primary-color-6);
    --insured-primary-color-active: var(--insured-primary-color-7);
    --insured-primary-color-light-default: #ffffff;
    --insured-primary-color-light-hover: #f7eded;
    --insured-primary-color-light-active: #f5eded;
    --insured-danger-color-default: #c90003;
    font-size: 16px;

    --insured-section-title-font-size: 1.25rem;
    --insured-section-title-line-height: 1.5rem;
    --insured-section-description-font-size: 1rem;
    --insured-section-description-line-height: 1.5rem;

    @media (width <= 480px) {
        --insured-section-title-font-size: 1.125rem;
        --insured-section-title-line-height: 1.5rem;
        --insured-section-description-font-size: 0.875rem;
        --insured-section-description-line-height: 1.125rem;
    }
}

/* -- RESET -- */
eugenius-client * {
    min-width: 0;
    font: inherit;
}

eugenius-client *,
eugenius-client *::before,
eugenius-client *::after {
    box-sizing: border-box;
}

eugenius-client {
    font-family: 'FavoritPro-Regular', sans-serif;
    line-height: 1.5;
    margin: 0;
    min-height: 100dvh;

    img,
    video,
    svg {
        display: block;
        height: auto;
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }
}