:root {
    --smplsColorWhite-hsl: 0, 0%, 100%;
    --smplsColorBlack-hsl: 255, 9%, 9%;
    --smplsColorPrimary-hsl: 212, 80%, 42%;
    --smplsColorLightPrimary-hsl: 219, 100%, 87%;
    --smplsColorDarkPrimary-hsl: 255, 5%, 4%;
    --smplsColorParagraph-hsl: 255, 25%, 25%;
    --smplsColorParagraphDark-hsl: 0, 0%, 70%;
    --smplsFontHeading: "Inter", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --smplsFontParagraph: "Inter", sans-serif;
    --smplsFontButton: "Inter", sans-serif;
    --smplsFontMisc: "Inter", sans-serif;
    --smplsColorGray50: #fafafa;
    --smplsColorGray100: #f4f4f5;
    --smplsColorGray200: #e4e4e7;
    --smplsColorGray300: #d4d4d8;
    --smplsColorGray400: #a1a1aa;
    --smplsColorGray500: #71717a;
    --smplsColorGray600: #52525b;
    --smplsColorGray700: #3f3f46;
    --smplsColorGray800: #222125;
    --smplsColorGray900: #1b1a1e;
    --smplsColorGray950: #161519;
}

:root {
    --smplsFontSizeHtml: 0.68vw;
    --smplsFontSizeBody: 1rem;
    --smplsFontSizeNavigationItem: 1rem;
    --smplsLineHeightParagraph: 1.5;
    --smplsFontWeightParagraph: 400;
    --smplsLetterSpacingParagraph: 0.4;

    --smplsContainer: 95vw;
    --smplsContainer3xl: 110rem;
    --smplsContainer2xl: 85vw;
    --smplsContainerXl: 85vw;
    --smplsContainerPadding3xl: 1vw;
    --smplsContainerPadding2xl: 1vw;
    --smplsContainerPaddingSm: 8vw;
    --smplsContainerPadding: 5%;

    /* Main */
    --smplsColorBody: hsla(var(--smplsColorWhite-hsl));
    --smplsColorBodyDark: var(--smplsColorGray900);
    --smplsColorParagraph: hsla(var(--smplsColorParagraph-hsl));
    --smplsColorParagraphDark: hsla(var(--smplsColorParagraphDark-hsl));
    --smplsColorWhite: hsla(var(--smplsColorWhite-hsl));
    --smplsColorBlack: hsla(var(--smplsColorBlack-hsl));
    --smplsColorPrimary: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorLightPrimary: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorDarkPrimary:hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorLink: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorLinkHover: hsla(var(--smplsColorBlack-hsl));
    --smplsRadiusBase: 20px;

    /* Header */
    --smplsColorHeader: transparent;
    --smplsColorHeaderDark: transparent;
    --smplsColorHeaderText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeaderTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorHeadroom: hsla(var(--smplsColorWhite-hsl));
    --smplsColorHeadroomDark: hsla(var(--smplsColorBlack-hsl));
    --smplsColorHeaderMoreTools: hsla(var(--smplsColorBlack-hsl));
    --smplsColorHeaderMoreToolsDark: hsla(var(--smplsColorBlack-hsl));

    /* Buttons */
    --smplsColorButton: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorButtonText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorButtonBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonUnderlined: hsla(var(--smplsColorBlack-hsl));
    --smplsColorButtonUnderlinedInversed: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonUnderlinedHover: hsla(var(--smplsColorBlack-hsl));
    --smplsColorButtonUnderlinedInversedHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsRadiusButton: 55px;
    --smplsFontWeightButton: 600;
    --smplsLetterSpacingButton: 0.01em;
    --smplsBorderWidthButton: 1px solid transparent;
    --smplsTextTransformButton: inherit;

    /* Heading */
    --smplsColorHeading: hsla(var(--smplsColorBlack-hsl));
    --smplsColorHeadingHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeadingLinkHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeadingLinkHoverDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorHeadingDarkHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorSubHeading: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorSubHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorHeadingGradientStart: #008ed4;
    --smplsColorHeadingGradientEnd: #2c4faa;
    --smplsColorHeadingGradientStartDark: #008ed4;
    --smplsColorHeadingGradientEndDark: #2c4faa;
    --smplsFontWeightSubHeading: 400;
    --smplsFontWeightHeading: 600;
    --smplsLetterSpacingHeading: inherit;
    --smplsLetterSpacingSubHeading: .1em;
    --smplsFontSubHeading: var(--smplsFontButton);
    --smplsTextTranformHeading: none;
    --smplsTextTranformSubHeading: uppercase;
    --smplsLineHeightHeading: 1.2;
    --smplsLineHeightSubHeading: 1.375;

    /* Icons */
    --smplsColorIcon: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorIconTextDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorIconInvert: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorIconBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconInvertBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconFlat: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconFlatHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorIconFlatDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorIconFlatHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconBorderDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorIconTitle: hsla(var(--smplsColorBlack-hsl));
    --smplsColorIconTitleDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorIconDescription: hsla(var(--smplsColorBlack-hsl));
    --smplsColorIconDescriptionDark: var(--smplsColorGray200);
    --smplsRadiusIcon: 15px;
    --smplsBorderWidthIcon: 0;
    --smplsFontWeightIcon: 200;

    /* Cards */
    --smplsColorCard: var(--smplsColorGray200);
    --smplsColorCardDark: var(--smplsColorGray800);
    --smplsColorCardButton: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorCardButtonDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardButtonText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardButtonTextDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIcon: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIconTextDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIconBorder: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardIconFlat: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardIconTitle: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardIconTitleDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardText: var(--smplsColorGray600);
    --smplsColorCardTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorCardHeading: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardHeadingLinkHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardLink: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardInput: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardInputDark: hsla(var(--smplsColorWhite-hsl));

    /* Sections */
    --smplsColorSectionOverlay: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCirclesStart: hsla(var(--smplsColorDarkPrimary-hsl), 0.07);
    --smplsColorCirclesEnd: hsla(var(--smplsColorDarkPrimary-hsl), 0.02);
    --smplsColorSectionOverlayGradient: linear-gradient(0deg, hsla(var(--smplsColorBlack-hsl)) 0%, hsla(var(--smplsColorBlack-hsl), 0.5) 50%, hsla(var(--smplsColorBlack-hsl)) 100%);

    /* Modals */
    --smplsColorModal: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorModalHeading: hsla(var(--smplsColorWhite-hsl));
    --smplsColorModalText: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalButton: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalButtonText: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalInput: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalInputPlaceholder: var(--smplsColorGray600);
    --smplsColorModalDark: var(--smplsColorGray900);
    --smplsColorModalHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorModalTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalButtonDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalButtonTextDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalInputDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalInputPlaceholderDark: var(--smplsColorGray600);
    --smplsMaxWidthModal: 40rem;

    /* Forms */
    --smplsColorInput: transparent;
    --smplsColorInputDark: transparent;
    --smplsColorInputText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorInputTextDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorInputPlaceholder: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsBorderWidthInput: 0px 0px 1px 0px;
    --smplsBorderColorInput: var(--smplsColorDarkPrimary);
    --smplsBorderColorInputDark: var(--smplsColorLightPrimary);
    --smplsRadiusInput: 0;

    /* Footer */
    --smplsColorFooter: hsla(var(--smplsColorBlack-hsl));
    --smplsColorFooterDark: hsla(var(--smplsColorBlack-hsl));
    --smplsColorFooterCopyrightDark: var(--smplsColorGray900);
    --smplsColorFooterText: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterCopyright: black;
    --smplsColorFooterHeading: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterHeadingDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterLink: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterLinkHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterLinkDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterLinkHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIcon: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorFooterIconInvert: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconInvertText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterIconBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconInvertBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconFlat: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconFlatHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterIconFlatDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconFlatHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconBorderDark: hsla(var(--smplsColorPrimary-hsl));

    /* Navigation */
    --smplsColorNavigation: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorNavigationDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItem: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItemHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorNavigationItemSub: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItemSubHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItemDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationItemDarkHover: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationSubmenu: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationSubmenuDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationSubmenuItem: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationSubmenuItemHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorNavigationSubmenuItemDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorNavigationSubmenuItemHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorMobileMenu: var(--smplsColorGray100);
    --smplsColorMobileMenuItem: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorMobileMenuItemBorder: hsla(var(--smplsColorDarkPrimary-hsl), 16%);
    --smplsColorMobileMenuDark: var(--smplsColorGray900);
    --smplsColorMobileMenuItemDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorMobileMenuItemBorderDark: hsla(var(--smplsColorLightPrimary-hsl), 16%);
    --smplsFontWeightNavigationItem: 400;
    --smplsFontNavigationItem: var(--smplsFontButton);
    --smplsNavColor: var(--smplsColorDarkPrimary);
    --smplsNavColorInvert: var(--smplsColorWhite);
    --smplsNavActiveColor: var(--smplsColorPrimary);
    --smplsNavBorder: 1px solid var(--smplsColorPrimary);
    --smplsNavBorderColor: var(--smplsColorWhite);
    --smplsNavBorderColorDark: var(--smplsColorBlack);

    /*  Third Party */
    --smplsColorSwiperButton: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsBorderWidthSwiperButton: 1px;
    --smplsColorNav: var(--smplsColorDarkPrimary);
    --smplsColorNavInvert: var(--smplsColorWhite);
    --smplsColorNavActive: var(--smplsColorPrimary);
    --smplsColorNavBorder: 1px solid var(--smplsColorPrimary);
    --smplsColorNavBorderActive: 1px solid var(--smplsColorPrimary);
    --smplsBorderColorNav: var(--smplsColorWhite);
    --smplsBorderColorNavDark: var(--smplsColorBlack);

}