:root {
    /* UCLA BLUE */
    --primary: #2774AE;
    --primary-hover: #246ba0;
    --primary-hover-tint: #2774AE1D;
    --primary-active: #226699;
    --primary-active-tint: #2774AE28;
    --on-primary: white;
    --on-primary-hover: #ebebeb;
    --on-primary-active: #e0e0e0;
    --primary-dark: #005587;
    --on-primary-dark: white;
    --primary-darker: #003B5C;
    --on-primary-darker: white;
    --primary-light: #8BB8E8;
    --on-primary-light: black;
    --primary-lighter: #DAEBFE;
    --primary-lighter-hover: #c9d9ea;
    --primary-lighter-active: #c0cfdf;
    --on-primary-lighter: black;
    /* UCLA GOLD */
    --secondary: #FFD100;
    --on-secondary: var(--primary-dark);
    --secondary-hover: #ebc100;
    --secondary-active: #e0b800;
    --secondary-dark: #FFB81C;
    --secondary-darker: #FFC72C;
    /* BACKGROUND */
    --background: #FFFFFF;
    --background-variant: #E6E6E6;
    --background-modal: rgba(0, 0, 0, 0.5);
    --background-modal-light: rgba(0, 0, 0, 0.1);
    /* HR */
    --hr-thickness: 2px;
    --hr-color: #D9D9D9;
    --hr-color-light: #C0C0C014;
    /* TYPOGRAPHY */
    --text-color-secondary: #7E7E7E;
    --header-family: Arial, sans-serif;
    --h1-size: 3rem;
    --h1-weight: bold;
    --h1-line-height: 1.15;
    --h1: var(--h1-weight) var(--h1-size)/var(--h1-line-height) var(--header-family);
    --h2-size: 2rem;
    --h2-weight: bold;
    --h2: var(--h2-weight) var(--h2-size) var(--header-family);
    --h3-size: 1.5rem;
    --h3-weight: bold;
    --h3: var(--h3-weight) var(--h3-size) var(--header-family);
    --h4-size: 1.25rem;
    --h4-weight: bold;
    --h4: var(--h4-weight) var(--h4-size) var(--header-family);
    --h5-size: 1rem;
    --h5-weight: normal;
    --h5: var(--h5-weight) var(--h5-size) var(--header-family);
    --h6-size: 1rem;
    --h6-weight: normal;
    --subtitle: var(--h5);
    --subtitle-color: var(--text-color-secondary);
    --body-size: 1rem;
    --body-weight: normal;
    --body-line-height: 1.6;
    --body: normal var(--body-size);
    --transition-appear-long: 300ms;
    --transition-appear: 200ms;
    --transition-short: 100ms;
    --transition-ease: ease;
    --transition-ease-inout: ease-in-out;
    --transition-ease-in: ease-in;
    --transition-ease-out: ease-out;
    --breakpoint-xl: 75rem;
    --breakpoint-lg: 64rem;
    --breakpoint-md: 40rem;
    --paper-background-color: #f5f5f5;
    /* 
        TAKEN FROM MUI'S DEFAULT THEME
        https://github.com/mui/material-ui/blob/de796368142abeca8ae0b6e94b45c162c096c735/packages/mui-material/src/styles/shadows.js
    */
    --elevation-0: none;
    --elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    --elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
    --elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
    --elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
    /* 1 UNIT OF SPACING (8px) */
    --spacing: 0.5rem;
    --nav-bar-height: 6rem;
    /* Z INDICES */
    --z-background: 0;
    --z-foreground: 100;
    --z-nav: 5000;
    --z-modal: 8000;
    --z-drawer: 10000;
    --z-top: 20000;
    /* ASPECTS */
    --big-image-aspect: 640 / 360;
}

@media (max-width: 40rem){
    :root {
        --h1-size: 2.5rem;
        --h2-size: 2rem;
        --h3-size: 1.75rem;
        --h4-size: 1.25rem;
    }
}

.typography-h1 {
    font: var(--h1-weight) var(--h1-size) var(--header-family);
}

.typography-h2 {
    font: var(--h2-weight) var(--h2-size) var(--header-family);
}

.typography-h3 {
    font: var(--h3-weight) var(--h3-size) var(--header-family);
}

.typography-h4 {
    font: var(--h4-weight) var(--h4-size) var(--header-family);
}

.typography-body {
    font: var(--body-weight) var(--body-size);
}

.typography-subtitle {
    font: var(--subtitle);
    color: var(--subtitle-color);
}

.color-on-primary {
    color: var(--on-primary);
}

.color-on-primary-dark {
    color: var(--on-primary-dark);
}

/* OVERRIDE FOUNDATION SPACING */
.columns, .column {
    padding: 0 calc(var(--spacing) * 2);
}