/* #BASE CSS (Initital Setup)
---------------------------------
    #GLOBAL SETTINGS
        # GLOBAL VARIABLES
        # GLOBAL RESETS
        # GLOBAL COLORS
    #BASE CONTENT
        #TYPOGRAPHY
            #BODY
            #HEADINGS
            #PARAGRAPHS
            #LINKS
        #HELPERS
        #MEDIA
            #IMAGES
            #VIDEO
        #COMPONENTS
            #BUTTONS
    #BASE LAYOUT
        #CONTAINER
        #MEDIA QUERIES
        #GRID SYSTEM
    #BASE SITE
        #SITE STRUCTURE
            #HEADER
                # site-logo (LOGO)
            #SITE NAVIGATION
                # toggle-nav (Default for Small Screens)
            #FOOTER
            #SECTIONS
            #SUB PAGES
                #...
--------------------------------- */

/* ------------------------------ */
/* --------- GLOBALS ------------ */
/* ------------------------------ */

/* GLOBAL VARIABLES */

:root {

    /* DEFINE BASE COLORS */
    --color-body-background: rgb(255, 255, 255);
    --color-text-body: rgba(0, 0, 0, 0.8);
    --color-text-headings: rgb(0, 0, 0);
    --color-links: #003366;
    --color-links-hover: #000033;

    /* DEFINE BASE FONTS */
    --font-body: system-ui, Helvetica, Arial, sans-serif;
    --font-headings: Georgia, 'Times New Roman', Times, serif;

}

/* GLOBALS RESETS */

/* REMOVE DEFAULT BODY MARGIN */
body { margin: 0; }

/* SET GLOBAL BOX SIZING FOR ALL ELEMENTS TO BORDER BOX */
* { box-sizing: border-box; }

/* ENABLE GLOBAL SUPPORT FOR SMOOTH SCROLLING */
html { scroll-behavior: smooth; }


/* GLOBALS COLORS */

body {

    /* SET BODY (PAGE) BACKGROUND COLOR */
    background-color: var(--color-body-background);

    /* SET MAIN BODY TEXT COLOR */
    color: var(--color-text-body);

}

/* SET HEADING TEXT COLOR */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-headings);
}

/* SET LINKS COLOR */
a {
    color: var(--color-links);

    /* SET LINKS HOVER COLOR */
    &:hover {
        color: var(--color-links-hover);
    }

}

/* ------------------------------ */
/* ------ BASE CONTENT ---------- */
/* ------------------------------ */

/* SET GLOBAL BODY FONT */
body {
    font-family: var(--font-body);
}

/* SET GLOBAL HEADINGS FONT */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
}