/*Blue Definitions*/
/*Color definitions for Blue Global Styles. You may replace this file with your own. */

/*
How Blue CSS Works
-------------------
There are three files you need to utilize. Attach them in order to your document. 

1) Definitions (_blue-definitions.css): Root CSS variables that define colors used in the Global Styles. You can create your own version of this file to control all global color styles.

2) Blue Global (_blue-global.css): The base global style sheet. It removes most browser default styling and provides a baseline for all elements. It also provides additional styling options you can utilize. 

3) Style Guide (_blue-style-guide.css): A style guide with brand colors and overrides for anything in Blue Global. An example is provided with useful color schemes. 
*/

:root {
  
  /*Primary Colors*/
  /*old blue #1e90ff;*/
  --brand-primary: #4B8BF1;
  --brand-secondary: #03D5AB; 
  --brand-tertiary: #313A51; 
  
  /*Denotative Colors*/
  --denotative-success: #03D5AB;
  --denotative-failure: #C82E41;
  --denotative-info: #4B8BF1;
  --denotative-warning: #F1C178;
  
  /*Copy Colors*/
  --copy-light: rgba(255, 255, 255, 0.87);
  --copy-light-medium: rgba(255, 255, 255, 0.6);
  --copy-light-hc: white;
  
  --copy-dark: rgb(0, 0, 0, .87);
  --copy-dark-medium: rgb(0, 0, 0, .60);
  --copy-dark-hc: black;
  
  /*Input Colors*/
  --input-light:rgba(255, 255, 255, 0.9);
  --input-light-alt: rgba(219, 226, 231, 0.9);
  --input-dark: rgba(22, 27, 31, 0.9);
  --input-dark-alt: rgba(48, 55, 65, 0.9);
  
  /*Icon Colors*/
  --icon-light: rgba(255,255,255, 0.90);
  --icon-gray: rgba(149,161,172, 0.90);
  --icon-dark: rgba(0,0,0, 0.90);
  --icon-light-hc: white;
  --icon-dark-hc: black;
  
  /*Neutral Colors*/
  --neutral-light-1: rgb(255, 255, 255);
  --neutral-light-2: rgb(241, 244, 248);
  --neutral-light-3: rgb(219, 226, 231);
  
  --neutral-gray-1: rgb(149, 161, 172);
  --neutral-gray-2: rgb(90, 103, 113);
  --neutral-gray-3: rgb(66, 78, 90);
  
  --neutral-dark-1: rgb(32, 38, 45);
  --neutral-dark-2: rgb(22, 27, 31);
  --neutral-dark-3: rgb(0, 0, 0);
  
  /*Transparent Colors*/
  /*Transparent*/
  --transparent-light-1: rgba(255,255,255,0.3);
  --transparent-light-2: rgba(255,255,255,0.6);
  --transparent-light-3: rgba(255,255,255,0.9);
  --transparent-gray-1: rgba(128,128,128,0.3);
  --transparent-gray-2: rgba(128,128,128,0.6);
  --transparent-gray-3: rgba(128,128,128,0.9);
  --transparent-dark-1: rgba(0,0,0,0.3);
  --transparent-dark-2: rgba(0,0,0,0.6);
  --transparent-dark-3: rgba(0,0,0,0.9);

  /*Elevations*/
  --elevation-light-1: #FFFFFF;
  --elevation-light-1-shadow: 0px 1px 3px 0px rgba(0,0,0, 0.15);
  
  --elevation-light-2: #FFFFFF;
  --elevation-light-2-shadow: 0px 2px 7px 0px rgba(0,0,0, 0.20);
  
  --elevation-light-3: #FFFFFF;
  --elevation-light-3-shadow:  0px 3px 10px 0px rgba(0,0,0, 0.20);
    
  --elevation-dark-1 : #090F13;
  --elevation-dark-1-shadow:   0px 1px 3px 0px rgba(0,0,0, 0.15);
  
  --elevation-dark-2: #161b1f;
  --elevation-dark-2-shadow:   0px 2px 7px 0px rgba(0,0,0, 0.20);
  
  --elevation-dark-3: #20252A;
  --elevation-dark-3-shadow:  0px 3px 10px 0px rgba(0,0,0, 0.20);
  
  /*Override Example*/
  --brand-override: red; 

}