/* Import framework configuration files */
@import url("./config/typography.css");
@import url("./config/theme.css");

/* Import framework layout and section styles */
@import url("./components/layouts-sections/fs-landing-layout.css");
@import url("./components/layouts-sections/fs-main-layout.css");
@import url("./components/layouts-sections/fs-single-column.css");
@import url("./components/layouts-sections/fs-row.css");

/* Import framework component styles */
@import url("./components/atoms/fs-home-icon/fs-home-icon.css");
@import url("./components/atoms/fs-text-section/fs-text-section.css");
@import url("./components/atoms/fs-illustration/fs-illustration.css");
@import url("./components/atoms/fs-modal-bar/fs-modal-bar.css");
@import url("./components/atoms/fs-modal-button/fs-modal-button.css");
@import url("./components/atoms/fs-navigation-item/fs-navigation-item.css");
@import url("./components/atoms/fs-search-bar/fs-search-bar.css");
@import url("./components/atoms/fs-button/fs-button.css");
@import url("./components/atoms/fs-tag/fs-tag.css");
@import url("./components/atoms/fs-tab-item/fs-tab-item.css");
@import url("./components/atoms/fs-dropdown-item/fs-dropdown-item.css");
@import url("./components/atoms/fs-progress-bar/fs-progress-bar.css");
@import url("./components/atoms/fs-stat-card/fs-stat-card.css");
@import url("./components/atoms/fs-table-item/fs-table-item.css");
@import url("./components/molecules/fs-home-bar/fs-home-bar.css");
@import url("./components/molecules/fs-image-with-text/fs-image-with-text.css");
@import url("./components/molecules/fs-detail-card/fs-detail-card.css");
@import url("./components/molecules/fs-navigation-section/fs-navigation-section.css");
@import url("./components/molecules/fs-top-bar/fs-top-bar.css");
@import url("./components/molecules/fs-storage-item/fs-storage-item.css");
@import url("./components/molecules/fs-tab-navigation/fs-tab-navigation.css");
@import url("./components/molecules/fs-dropdown-menu/fs-dropdown-menu.css");
@import url("./components/molecules/fs-file-input/fs-file-input.css");
@import url("./components/molecules/fs-table-chart/fs-table-chart.css");
@import url("./components/organisms/fs-modal/fs-modal.css");
@import url("./components/organisms/fs-main-navigation/fs-main-navigation.css");

:root {
    /* Device breakpoint - the width at which all components and styles switch to mobile versions */
    --device-breakpoint: 768px;
    --device-max-width: 1920px;
    
    /* Spacing */
    --spacerX: 4px;
    --spacer1: 8px;
    --spacer2: 16px;
    --spacer3: 24px;
    --spacer4: 32px;
    --spacer5: 40px;
    --spacer6: 48px;
    --spacer7: 56px;
    --spacer8: 64px;
    --spacer9: 72px;
    --spacer10: 80px;
    --spacer11: 88px;
    --spacer12: 96px;
    --spacer13: 104px;
    --spacer14: 112px;
    --spacer15: 120px;
    --spacer-home-bar: 80px;
    
    /* Corner radiuses */
    --corner-radius-small: 4px;
    --corner-radius-medium: 8px;
    --corner-radius-large: 16px;
    --corner-radius-full: 999px;

    /* Effects, filters apply manually to elements that don't support drop-shadows (png images) */
    --main-shadow: 0px 85px 51px 0px rgba(0, 0, 0, 0.01), 0px 38px 38px 0px rgba(0, 0, 0, 0.01), 0px 9px 21px 0px rgba(0, 0, 0, 0.02);
    --main-shadow-filter:
        drop-shadow(0px 85px 51px 0px rgba(0, 0, 0, 0.01))
        drop-shadow(0px 38px 38px 0px rgba(0, 0, 0, 0.01))
        drop-shadow(0px 9px 21px 0px rgba(0, 0, 0, 0.02));
    --highlight-shadow: 0px 60px 151px 0px rgba(0, 0, 0, 0.01), 0px 85px 51px 0px rgba(0, 0, 0, 0.04), 0px 38px 38px 0px rgba(0, 0, 0, 0.06), 0px 21px 9px 0px rgba(0, 0, 0, 0.03);
    --highlight-shadow-filter:
        drop-shadow(0px 60px 151px 0px rgba(0, 0, 0, 0.01))
        drop-shadow(0px 85px 51px 0px rgba(0, 0, 0, 0.04))
        drop-shadow(0px 38px 38px 0px rgba(0, 0, 0, 0.06))
        drop-shadow(0px 21px 9px 0px rgba(0, 0, 0, 0.03));

    /* Cross-platform font weights */
    --font-weight-h1-max: 700;
    --font-weight-h1: 700;
    --font-weight-h2: 700;
    --font-weight-h3: 600;
    --font-weight-subtitle: 500;
    --font-weight-semi-subtitle: 400;
    --font-weight-paragraph: 400;
    --font-weight-button: 700;
    --font-weight-navigation: 400;
    --font-weight-tag: 400;

    /* Mobile font sizes */
    --font-size-h1-max: 32px;
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 14px;
    --font-size-subtitle: 14px;
    --font-size-semi-subtitle: 12px;
    --font-size-paragraph: 14px;
    --font-size-button: 12px;
    --font-size-navigation: 14px;
    --font-size-tag: 10px;

    /* Mobile line heights */
    --line-height-h1-max: normal;
    --line-height-h1: normal;
    --line-height-h2: 30px;
    --line-height-h3: 28px;
    --line-height-subtitle: normal;
    --line-height-semi-subtitle: 18px;
    --line-height-paragraph: 28px;
    --line-height-button: normal;
    --line-height-navigation: 24px;
    --line-height-tag: 16px;
}

@media (min-width: 820px) {
    :root {
        /* Desktop font sizes */
        --font-size-h1-max: 58px;
        --font-size-h1: 32px;
        --font-size-h2: 24px;
        --font-size-h3: 16px;
        --font-size-subtitle: 16px;
        --font-size-semi-subtitle: 14px;
        --font-size-paragraph: 16px;
        --font-size-button: 12px;
        --font-size-navigation: 16px;
        --font-size-tag: 12px;

        /* Desktop line heights */
        --line-height-h1-max: normal;
        --line-height-h1: normal;
        --line-height-h2: 32px;
        --line-height-h3: 30px;
        --line-height-subtitle: normal;
        --line-height-semi-subtitle: 20px;
        --line-height-paragraph: 30px;
        --line-height-button: normal;
        --line-height-navigation: 24px;
        --line-height-tag: 20px;
    }
}

body {
    margin: 0px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.fs-modal-open {
    overflow: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

html {
    background-color: var(--primary-bg-color);
}

img:focus {
    outline: none;
    border-top: 0;
}