:root {
    /* --- COLORS --- */
    --brand-color: #AD0151; /* Darker: 910144, Original: CC7C22 */
    --primary-color: #000000;
    --secondary-color: #FFFFFF;
   
    --white-color: #FFFFFF;
    --light-gray-color: #F9F9F9; /* Original: F9F9F9 */
    --medium-gray-color: #C0C0C0; /* Original: DDDDDD */
    --dark-gray-color: #808080; /* Original: 808285 */
    --black-color: #000000;
    
    /* --- SHADOWS --- */
    --element-shadow: 0 0 20px 0 rgb(0 0 0 / 0.25);
    --overlay-shadow: inset 0 0 0 50vw rgb(0 0 0 / 0.5);
    
    /* --- DURATIONS --- */
    --transition-duration: 0.3s;
    
    /* --- DIMENSIONS --- */
    --page-max-width: 140rem;
    --content-max-width: 70rem;
    --header-height-full: 9rem;
    --header-height-compact: 7rem;
    --hero-height-full: 100%;
    --hero-height-full-min: 50rem;
    --hero-height-compact: 30rem;
    --hero-height-compact-mobile: 15rem;
    
    /* --- SIZES --- */
    --size-xxs: 0.5rem;
    --size-xs: 1rem;
    --size-s: 1.5rem;
    --size-m: 2rem;
    --size-l: 2.5rem;
    --size-xl: 3rem;
    --size-xxl: 6rem;
}

/*
:root {
    --primary-color: #CC7C22;
    --secondary-color: #000000;
    --primary-bg-color: #FFFFFF; 
    --secondary-bg-color: #663E11;
    --primary-txt-color: #000000;
    --secondary-txt-color: #FFFFFF;
    
    /* --- COLOR PALETTE --- 
    --color-foreground-primary: #CC7C22;
    --color-background-primary: #FFFFFF;
    --color-text-primary: #000000;
    --color-text-secondary: #FFFFFF;
    
    /* --- ANIMATION DURATIONS --- 
    --duration-transition: 0.3s;
}
*/

/*
NOTES

#4169E1 - blue
                - page links
#191970 - dark blue
                - hovered page links
#FFFFFF - white
                - page background
                - modal background
                - starting nav logo
                - starting nav links
                - scrolled nav background
                - dropdown nav border
                - dropdown nav links
                - hero title
                - hero button background
                - hovered hero button text
                - page button text
#000000 - black
                - page text
                - modal logo
                - scrolled nav logo
                - scrolled nav links
                - hero button text
                - society logo
                - headings
                - page button background
#CC7C22 - orange
                - modal title
                - highlighted nav link
                - dropdown nav background
                - hovered hero button background
                - higlighted text
                - circle higlight
                - headings
                - hovered page button background
#C4B583 - dirty yellow
                - footer nav highlighted link
#808285 - dark grey
                - modal text
                - modal close button
#DDDDDD - grey
                - mobile nav border
#F9F9F9 - light grey
                - mobile nav background
shadow
                - scrolled nav
                - hero button
                - hero overlay
*/