@import url(assets/fonts/typography.font-barlow.css);

:root {
    --mi-content-grid-gap: 26px;

    --mi-base-gap: 15px;
    --mi-base-padding: 15px;
    --mi-base-transition: all 0.5s;

    --mi-content-padding: 1rem;
    --mi-content-margin: 30px;
    --mi-content-margin-bottom: 25px;

    --mi-color-primary: #373737;
    --mi-color-primary_reverse: white;

    /** Typography    */
    --mi-font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /** Boxes  */
    --mi-box-bg: white;
    /** --mi-box-shadow: 0 10px 15px -5px rgba(26, 94, 71, .3); **/
    --mi-box-shadow: none;
    --mi-box-border-top: 1px solid rgba(85, 85, 85, 0.3);
    --mi-box-border-left: 1px solid rgba(85, 85, 85, 0.3);
    --mi-box-border-right: 1px solid rgba(85, 85, 85, 0.3);
    --mi-box-border-bottom: 1px solid rgba(85, 85, 85, 0.3);
    --mi-box-padding: 0;
    --mi-box-border-radius: 10px;
    /** Footer & Breadcrumbs **/

    --mi-color-footer_breadcrumb_bg: var(--mi-color-primary);
    --mi-color-footer_breadcrumb: var(--mi-color-primary_reverse);
    --mi-color-footer_breadcrumb_link: var(--mi-color-footer_breadcrumb);
    --mi-color-footer_breadcrumb_link_hover: var(--mi-color-footer_breadcrumb);

    /** Forms & Buttons **/
    --mi-button-border-radius: 0px;

    --mi-input-padding: .267em 0.367em;
    --mi-input-border: 1px solid var(--mi-color-primary);
    --mi-input-border-color: var(--mi-color-primary);
    --mi-input-border-radius: var(--mi-button-border-radius);

    --mi-button-border: 1px solid;
    --mi-button-border-radius-top-left: var(--mi-button-border-radius);
    --mi-button-border-radius-top-right: var(--mi-button-border-radius);
    --mi-button-border-radius-bottom-left: var(--mi-button-border-radius);
    --mi-button-border-radius-bottom-right: var(--mi-button-border-radius);

    --mi-button-padding: .567em 1.333em;

    /** Normal buttons (Outline) **/
    --mi-button-color: var(--mi-color-primary);
    --mi-button-background-color: transparent;
    --mi-button-border-color: var(--mi-color-primary);

    --mi-button-hover-border-color: var(--mi-color-primary);
    --mi-button-hover-background-color: var(--mi-color-primary);
    --mi-button-hover-color: var(--mi-color-primary_reverse);

    /** Primary buttons (Filled) **/
    --mi-button-alt-color: var(--mi-color-primary_reverse);
    --mi-button-alt-background-color: var(--mi-color-primary);
    --mi-button-alt-border-color: var(--mi-color-primary);

    --mi-button-alt-hover-border-color: var(--mi-color-primary);
    --mi-button-alt-hover-background-color: var(--mi-color-primary);
    --mi-button-alt-hover-color: var(--mi-woo-button-alt-color);

    /** Navigation **/

    --mi-page-navigation-color: white;

    /** WooCommerce
       * Normal buttons like "outline"
       * Primary buttons like "full"
    **/
    --mi-woo-button-border-radius: var(--mi-button-border-radius);
    --mi-woo-button-border: var(--mi-button-border);
    --mi-woo-button-font-weight: normal;
    --mi-woo-button-padding: var(--mi-button-padding);

    /** WooCommerce: Normal buttons **/
    --mi-woo-button-color: var(--mi-button-color);
    --mi-woo-button-background-color: var(--mi-button-background-color);
    --mi-woo-button-border-color: var(--mi-button-border-color);

    --mi-woo-button-hover-border-color: var(--mi-woo-button-border-color);
    --mi-woo-button-hover-background-color: var(--mi-woo-button-background-color);
    --mi-woo-button-hover-color: var(--mi-woo-button-color);

    /** WooCommerce: Primary buttons **/
    --mi-woo-button-alt-color: var(--mi-button-alt-color);
    --mi-woo-button-alt-background-color: var(--mi-button-alt-background-color);
    --mi-woo-button-alt-border-color: var(--mi-button-alt-border-color);

    --mi-woo-button-alt-hover-border-color: var(--mi-woo-button-alt-background-color);
    --mi-woo-button-alt-hover-background-color: var(--mi-woo-button-alt-background-color);
    --mi-woo-button-alt-hover-color: var(--mi-woo-button-alt-color);

    /** Breakpoints **/
    --mi-breakpoint-mobile: 37.5em;

    /** Basecss Variables  */

    --line-height-1: 1;
    --line-height-2: 1.125;
    --line-height-3: 1.25;
    --line-height-4: 1.5;
    --caps-letter-spacing: .25em;
    --bold-font-weight: bold;
    --space-1: 15px;
    --space-2: 30px;
    --space-3: 42px;
    --space-4: 56px;

    /** Animate CSS **/
    /** see https://animate.style/ **/

    /** General configs **/
    --config-lists-margin: 0 0 var(--mi-base-padding) 0;
    --config-lists-padding: 0 0 0 12px;
}

@media (max-width: 37.5em) {
    :root {
        --mi-content-margin: 20px;
    }
}