/*
  theme_style.css

  This stylesheet defines global color variables using CSS custom properties (:root)
  Imported into the main stylesheet (style.css) to ensure consistent application of the color theme across the entire site.
  
  Can link to other style sheets and make a "Dark mode" feature easy to implement.
*/

:root {
	
/*************************************************/
/*                                               */
/* Branding Constants                            */
/*                                               */
/*************************************************/

	/* Colors */
	--mw-orange:            	#F15A24;                                 /* var(--mw-orange) */
	--mw-blue:              	#006A81;                                 /* var(--mw-blue) */
	
	--mw-dark-grey:         	#4C4C4C;                                 /* var(--mw-dark-grey) */
	--mw-grey:              	#969494;                                 /* var(--mw-grey) */
	--mw-light-grey:        	#CCCCCC;                                 /* var(--mw-light-grey) */
	--mw-lighter-grey:      	#F2F2F2;                                 /* var(--mw-lighter-grey) */
	--mw-lightest-grey:     	#FCFCFC;                                 /* var(--mw-lightest-grey) */
	
	--mw-white:                 #FFFFFF;                                 /* var(--mw-white) */
	
	/* Themes */
    --mw-font-family:           "Inter", "X-LocaleSpecific", sans-serif; /* var(--mw-font-family) */
    
    /* Call To Action */
	--primary-cta:              var(--mw-blue);                          /* var(--primary-cta) */
	--secondary-cta:            var(--mw-orange);                        /* var(--secondary-cta) */
	--tertiary-cta:             var(--mw-grey);                          /* var(--tertiary-cta) */
	
/*************************************************/
/*                                               */
/* Use Cases                                     */
/*                                               */
/*************************************************/
	
	/* Background */
    --section-br-wh:     		 var(--mw-white);                     	/* var(--section-br-wh) */
    --section-br-gry:    		 var(--mw-lightest-grey);             	/* var(--section-br-gry) */
    --section-br-border: 		 #E0E0E0;                           	/* var(--section-br-border) */
        
    /* Buttons */
    --primary-btn-br:    		 var(--primary-cta);                    /* var(--primary-btn-br) */
    --primary-btn-color:         var(--mw-white);                    	/* var(--primary-btn-color) */
    --primary-btn-border:        var(--primary-cta);                    /* var(--primary-btn-border) */
    --primary-btn-shadow:        var(--primary-cta);                   	/* var(--primary-btn-shadow) */
    
    --primary-btn-br-h:  		 var(--secondary-cta);                  /* var(--primary-btn-br-h) */
    --primary-btn-color-h:       var(--mw-white);                    	/* var(--primary-btn-color-h) */
    --primary-btn-border-h:      var(--secondary-cta);                  /* var(--primary-btn-border-h) */
    --primary-btn-shadow-h:      var(--secondary-cta);                  /* var(--primary-btn-shadow-h) */
    
}