/* Fonts */
/* ----- Epilogue (300) ----- */
@font-face {
    font-family: 'Epilogue';
    src: url('../fonts/epilogue-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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

/* ----- Fraunces (400) ----- */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

/* ROOT */
:root {
    /* Fonts */
    --font-body: 'Epilogue', sans-serif;
    --font-heading: 'Fraunces', serif;

    /* Font sizes*/
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-button-primary: 1rem;
    --font-size-button-secondary: 1rem;

    --font-size-h1: clamp(40px, 7.5vw, 80px);
    --font-size-h2: clamp(32px, 5vw, 54px);
    --font-size-h3: clamp(28px, 4.2vw, 40px);

    @media (width >= 768px) {
        --font-size-sm: 14px;
        --font-size-md: 16px;
        --font-size-lg: 18px;
        --font-size-xl: 20px;
    }

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

    /* Line heights */
    --line-height-heading: 1.1;
    --line-height-bitty: 1;
    --line-height-mini: 1.1;
    --line-height-xs: 1.2;
    --line-height-sm: 1.3;
    --line-height-md: 1.5;

    /* Max widths */
    --max-width-section: 100rem;
    --max-width-heading: 35rem;

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

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

    /* Spacing */
    --spacing-mini: .5rem;
    --spacing-sm: .75rem;
    --spacing-lg: 1.25rem;
	--spacing-xl: calc(var(--spacing-lg) * 1.5);

    @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 */
    --padding-box-sm: 1.5rem;
    --padding-accordion: 1.5rem;

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

    --boxes-padding: 2.5rem 2rem 2rem 2rem;
    --flare-padding: .52em .88em;

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

    @media (width >= 768px) {
        --padding-box-sm: 2rem;

        --section-wrapper-vp: 6.25rem;
        --hero-top-padding: min(var(--section-wrapper-vp), 6vh);
    }

    @media (width >= 1025px) {
        --section-wrapper-vp: 8rem;
    }

    /* Gaps */
    --section-wrapper-gap: 2rem;
    --heading-wrapper-gap: 1.5rem;
    --heading-i-wrapper-gap: 1rem;
    --boxes-gap: .75rem;
    --boxes-i-gap: 1.75rem;

    @media (width >= 768px) {
        --section-wrapper-gap: 2.5rem;
        --heading-wrapper-gap: 2rem;
        --heading-i-wrapper-gap: 1.25rem;
        --boxes-gap: 1rem;
    }

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

    /* Margin */
    --margin-cta: .5rem;

    @media (width >= 768px) {
        --margin-cta: .75rem;
    }

    /* Colors */
    --color-body: rgba(36, 34 , 30, .85);
    --color-strong: var(--black);
    --color-heading: var(--black);

    --light-opacity-text: rgba(36, 34, 30, .5);
    --quarter-black: rgba(36, 34, 30, .25);

    --black: #24221E;
    --background-light: #F4F2ED;
    --background-md: #EBE5DC; 

    --cta-light: #93BCED;
    --cta-light-hover: #6FA3E1;
    --cta-dark: #276BBE;

    --green: #5F634F;
    --dark-green: #3E4134;

    /* Box Shadows */
    --background-md-box-shadow: 0px 4px 16px hsl(36, 27%, 85%);
	--black-shadow: 0px 4px 16px rgba(36, 34 , 30, .05);

    --background-shadow-mini:
        0 1px 1px rgb(99, 77, 54, .10),
        0 2px 4px rgb(99, 77, 54, .08),
		0 0 0 1px rgb(213, 208, 195, .25);
	
	--background-shadow-mini-hover: 
		0 2px 2px rgb(99, 77, 54, .10),
        0 4px 8px rgb(99, 77, 54, .08),
    	0 0 0 1px rgb(213, 208, 195, .25);

    /* Nav Bar */
    --nav-bar-i-height: 4rem;
    --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: .75rem;
    }


    /* Border Radius */
    --radius-sm: .75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;

    /* Forms */
    --form-column-gap: 1rem;
    --form-row-gap: 1rem;
    --form-label-gap: .5rem;

    /* Transitions */
    --hover-time: 150ms;

    /* Timing Functions */
    --timing-function-entrance-animation: ease-in;

    

    /* Backwards compatability */
    --section-max: var(--max-width-section);
    --heading-cta-margin: var(--margin-cta);
    --lowered-opacity-text: var(--color-body);
    --text: var(--black);
}

/* /ROOT */