@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Roboto:wght@400;700&display=swap");

:root {
    /* Base Brand Colors */
    /* naming influenced by App's MUI Component library */

    --light-text-primary: rgba(33, 31, 31, 0.87);
    --light-text-secondary: rgba(33, 31, 31, 0.64);

    --light-text-white: #FFFFFF;

    --light-primary-main: #06A76C;
    --light-primary-dark: #058556;

    --light-secondary-main: #2C324F;
    --light-secondary-dark: #040A27;

    --light-other-snackbar: #393939;
    
    --light-info-dark: #136596;
    --light-info-light: #74CEFF;
    
    --background-primary: #FFFFFF;
    --background-secondary: #F9F9F9;

    --grey-300: #E0E0E0;
    --grey-400: #BDBDBD;

    --form--supporting-grey: #ACA199;

    --light-error-main: #E14F42;



    /* font must be a minimum of 14px for accessability. */
    --min-font-size: 0.875rem;
}

/* h1 used page-header https://www.figma.com/file/wyJPRRvmmxnOrom0GmYqci/MUI-for-Figma-Material-Pro-v5.9.0?node-id=9056%3A89876&t=QtbjnWLdG5Ss8dBT-0 */
h1 {
    color: var(--light-text-primary);
    font-family: "Libre Baskerville", sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.5;
}

h2 {
    color: var(--light-text-primary);
    font-size: 2rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: capitalize;
}

h3 {
    color: var(--light-text-primary);
    font-size: 1.8rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-transform: capitalize;
}

h4 {
    color: var(--light-text-primary);
    font-size: 1.3rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

h5 {
    font-size: 0.9rem;
    font-family: "Roboto", sans-serif;
}

h6 {
    font-size: 0.7rem;
    font-family: "Roboto", sans-serif;

}

p {
    font-size: 1.1rem;
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    color: var(--light-text-secondary);
}

a {
    color: var(--light-info-dark);
    text-decoration: none;
    font-weight: bold;
}

li {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: var(--light-text-secondary);
    margin: 10px 0;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
}

/* adding responsive sizing incrementally for mobile support */
@media screen and (min-width: 767px) {
    h1 {
        color: var(--light-text-primary);
        font-family: "Libre Baskerville", sans-serif;
        font-weight: 400;
        font-size: 43px;
        line-height: 1.5;
    }    
}