/* Fonts */
/* ===== Roboto Flex (400) ===== */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ===== Roboto Flex (500) ===== */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ===== Roboto Condensed (500) ===== */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* /Fonts */

:root {
    /* Fonts */
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Roboto Condensed', sans-serif;

    /* Font Sizes */
    --font-size-bitty: 8px;
    --font-size-mini: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    
    --font-size-h1: clamp(38px, 7.5vw, 68px);
    --font-size-h2: clamp(34px, 5.5vw, 52px);
    --font-size-h3: clamp(28px, 4.2vw, 40px);

    --font-size-blurb: var(--font-size-sm);

    --font-size-button-primary: 16px;
    --font-size-button-secondary: 16px;

    @media (width >= 768px) {
        --font-size-bitty: 10px;
        --font-size-mini: 12px;
        --font-size-sm: 14px;
        --font-size-md: 16px;
        --font-size-lg: 18px;
    }

    /* Font Weights */
    --weight-normal: 400;
    --weight-strong: 500;
    --weight-heading: 500;

    /* Line Heights */
    --line-height-heading: 1.15;
    --line-height-h1: var(--line-height-heading);
    --line-height-lg: 1.6;
    --line-height-md: 1.5;
    --line-height-sm: 1.3;
    --line-height-xs: 1.2;
    --line-height-mini: 1;
    --line-height-form-label: var(--line-height-xs);


    /* Nav Bar*/
    --nav-bar-i-height: 3.5rem;
    --nav-bar-padding: .5rem;
    --nav-bar-height: calc(var(--nav-bar-i-height) + var(--nav-bar-padding));

    @media (width >= 768px) {
        --nav-bar-i-height: 4.5rem;
        --nav-bar-padding: 1rem;
    }

    
    /* Max Widths */
    --section-max-width: 1280px;
    --heading-max-width: 36rem;

    @media (width >= 768px) {
        --heading-max-width: 43rem;
    }

    @media (width >= 1025px) {
        --heading-max-width: 50rem;
    }

    /* Spacing */
    --spacing-mini: .5rem;
    --spacing-sm: .75rem;
    --spacing-lg: 1.25rem;

    @media (width >= 768px) {
        --spacing-mini: .625rem;
        --spacing-sm: .875rem;
        --spacing-lg: 1.375rem;
    }

    @media (width >= 1025px) {
        --spacing-mini: .75rem;
        --spacing-sm: 1rem;
        --spacing-lg: 1.5rem;
    }


    /* Padding */
    --section-wrapper-hp: clamp(1rem, 3vw, 2rem);
    --section-wrapper-vp: 4.5rem;
    --section-wrapper-vp-half: calc(var(--section-wrapper-vp) / 2);
    --section-wrapper-vp-quarter: calc(var(--section-wrapper-vp) / 4);
    --hero-top-padding: min(var(--section-wrapper-vp), 5vh);
    --heading-wrapper-hp: var(--spacing-mini);

    --padding-blurb-v: .6em;
    --padding-blurb-h: .9em;
    --padding-blurb: var(--padding-blurb-v) var(--padding-blurb-h);

    --boxes-padding: 2.5rem 2rem 2rem 2rem; /* old but in use */

    --padding-box-xs: 1rem;
    --padding-box-sm: 1.5rem;
    --padding-box-md: 2rem;
    --padding-box-lg: 3rem;
    --padding-box-xl: 3.5rem;

    --padding-form-input: 1rem;

    @media (width >= 768px) {
        --section-wrapper-vp: 7rem;
        --hero-top-padding: min(var(--section-wrapper-vp), 8vh);

        --padding-box-xs: 1.25rem;
        --padding-box-sm: 2rem;
        --padding-box-md: 2.5rem;
        --padding-box-lg: 4.5rem;
        --padding-box-xl: 5.5rem;
    }
    
    @media (width >= 1025px) {
        --section-wrapper-vp: 8rem;
    }


    /* Gaps */
    --section-gap: 2rem;
    --section-gap-lg: calc(var(--section-gap) * 1.333);
    --heading-wrapper-gap: 26px;
    --heading-i-wrapper-gap: 1rem;
    --boxes-gap: var(--spacing-sm);
    --boxes-inner-gap: 2.5rem;
    --blurb-gap: .5rem;

    @media (width >= 768px) {
        --section-gap: 2.75rem;
        --heading-wrapper-gap: 30px;
        --heading-i-wrapper-gap: 18px;
    }

    @media (width >= 1025px) {
        --section-gap: 3rem;
        --heading-wrapper-gap: 2rem;
        --heading-i-wrapper-gap: 20px;
    }


    /* Margins */
    --margin-cta: var(--spacing-mini);


    /* Colors */
    --black: #30302a;
    --color-body: rgba(48, 48, 42, .7);
    --color-strong: var(--black);
    --color-heading: var(--black);

    --background: #FCFAF8;
    --background-light: #f2efe8;
    --background-medium: #ebe8e0;
    --background-dark: #E3E0D7;
	--outline: #d5d0c3;
    --outline-dark: #C2BBA9;

    --white: #FEFEFE;
    --main-grey: #EEECE9;
    --medium-grey: #A9A7A0;
    --dark-grey: #605F5E;
    --overlay-background: #30302ACC;

    --brand-color: #EF4144;
    --brand-color-hover: rgba(239, 65, 68, .85);
    --brand-color-active: rgba(239, 65, 68, .75);

    --yellow: #F9A03F;
    --coral: #fc6371;

    --light-pink: #FDEEF2;
    --pink: #FBDCE4;

    --background-gradient: linear-gradient(to top left, var(--background-medium) 20%, var(--background-light) 80%);

    --pink-gradient: radial-gradient(at top left, var(--light-pink) 20%, var(--pink) 80%);   
    --pink-gradient-hover: radial-gradient(at top left, var(--pink) 50%, var(--light-pink) 100%);  
    --pink-gradient-reverse: radial-gradient(at top left, var(--pink) 20%, var(--light-pink) 80%);
    --smoothie:
        radial-gradient(at top left, var(--brand-color) 0%, transparent 55%),
        radial-gradient(at bottom right, var(--yellow) 0%, transparent 55%),
        var(--coral);

    

    /* Border Radius */ 
    --radius-bitty: 8px;
	--radius-mini: 10px;

    --radius-xs: var(--radius-sm);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-form-input: 12px;

    @media (width >= 768px) {
        --radius-sm: 14px;
        --radius-md: 22px;
    }

    @media (width >= 1025px) {
        --radius-sm: 16px;
        --radius-md: 24px;
    }


    /* Box Shadow */
    --background-shadow-mini:
        0 1px 1px rgb(99, 77, 54, .10),
        0 2px 4px rgb(99, 77, 54, .08);

    --background-shadow: 
        0 0px 15px rgb(99, 77, 54, .07), 
        0 8px 25px rgb(99, 77, 54, .05);

    --nav-shadow:var(--background-shadow);


    /* Forms */
    --form-column-gap: .75rem;
    --form-row-gap: 1.25rem;
    --form-label-gap: 6px;


    /* Transitions */
    --color-transition: color .15s ease-in-out;
    --background-transition: background .15s ease-in-out;
    --background-color-transition: background-color .15s ease-in-out;

    /* Timing Functions */
    /* --timing-function-entrance-animation: cubic-bezier(0.3, 0, 0.58, 1); */
    --timing-function-entrance-animation: ease-out;


    /* Backwards Compatibility */
    --text: var(--black);
    --lowered-opacity-text: var(--color-body);
    --section-wrapper-horizontal-padding: var(--section-wrapper-hp);
    --section-wrapper-vertical-padding: var(--section-wrapper-vp);
    --section-wrapper-vertical-padding-quarter: var(--section-wrapper-vp-quarter);
    --section-inner-wrapper-gap: var(--section-gap);
    --heading-inner-wrapper-gap: var(--heading-i-wrapper-gap);
    --nav-bar-inner-height: var(--nav-bar-i-height);

        /* Margin */
        --heading-cta-margin: var(--margin-cta);

        /* Padding */
        --padded-link-padding: var(--padding-blurb);

}