/* Defeines root variables and tag defaults used across the site to ensure consistency. */

/* Variable Definitions -- Use across all styles */
:root {
    /* Colors */
    --persistent-background-color: #A0A0A0; /* Background color for persistent elements like headers/footers/navbars */
    --content-background-color: #F8F8F8; 
    --blank-background-color: #E0E0E0; 
    --trim-color: #EC1E24;
    --trim-hover-color: #000EEE;
    --subtle-border-color: #C0C0C0;
    --accent-color: #002030;
    --text-color: #000000; 
    --accent-text-color: #F8F8F8;
    --highlight-color: #B56BFF; /* maintain 3:1 contrast with background color for highlight behind text */
    --button-background-color: #002030; /* switched to same as accent for accessbility */
    --button-hover-background-color: #007AB8;
    --button-text-color: #FFFFFF;

    /* Sizes */
    --line-spacing: 1.25;
    --padding-large: 1rem;
    --padding-small: 0.5rem;
    --indent-size: 2rem;
    --title: 1.6rem;
    --subtitle: 1.4rem;
    --paragraph: 1.2rem;
    --footnote: 1rem;
    --tiny-text: 0.6rem;
}

/* CSS Reset to avoid unexpected defaults on all elements */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* Additional Base Styles */
html {
    font-size: 18px; /* 1rem = 18px -- all sizes should adjusted by varaibles */
}

body {
    font-family: Arial, sans-serif;
    line-height: var(--line-spacing);
    background-color: var(--blank-background-color);
    color: var(--text-color);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* Mobile styles -- override some root with relative size */
@media only screen and (max-width: 720px) {

    html {
        font-size: 16px; /* Adjust font size for mobile devices */
    }

}