
/*Default variables*/
:root {

  /* Colors from the Figma mockup */
  --primary-50: #c8d8fe;
  --primary-400: #0355f6;

  --primary-dark-400: #5682c9;
  --primary-dark-500: #275298;
  --primary-dark-800: #091933;

  --primary-light-400: #cdedff;
  --primary-light-100: #f3fbff;
  --primary-light-200: #e9f7ff;

  --default-20: #fbfcfd;
  --default-30: #f7f8f9;
  --default-40: #f3f5f7;
  --default-50: #dfe5eb;
  --default-60: #a09fa6;
  --default-80: #4A5768;
  --default-90: #504f57;

  --yellow-400: #e3ff66;

  --error-100: #ffe6e0;
  --error-300: #d42723;

  --success-50: #e9f5eb;
  --success-200: #85dc8d;
  --success-300: #19af27;
  --success-400: #00810c;

  /* Colors (there is a Colors.js constants file for any colors that are needed directly in the code) */
  --white: white; /*white could be off-white at some point*/
  --off-white: rgb(248, 248, 248);
  --black: black;
  --primary: var(--primary-400);
  --primary-dark: var(--primary-dark-400);
  --primary-light: var(--primary-light-400);

  /* code from the style guide */
  /*--primary: #2D31FA;*/

  /* more muted version*/


  --yellow: var(--yellow-400);
  --red: var(--error-300);

  --default-panel-background: var(--default-30);

  --link: var(--primary-dark);
  --bg-light: var(--default-30);
  --bg-default: var(--default-50);
  --bg-primary: var(--primary-50);

  --border-color: #dce4eb;
  --light-border-color: var(--default-40);

  --panel-border-color: rgba(15, 99, 168, 0.1); /*???? delete?*/
  --gray: var(--default-60);
  --light-gray: var(--default-40);

  --default-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
  --darker-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);

  --left-nav-color: var(--primary-dark);
  --left-nav-active-color: var(--primary-light-200);

  --button-box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
  --button-hover-box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);

  /*--button-box-shadow-lg: 4px 4px 5px 0 rgba(0, 0, 0, .175);*/
  /*--button-hover-box-shadow-lg: 2px 2px 5px 0 rgba(0, 0, 0, .175);*/
  --button-box-shadow-lg: 0 2px 0 0 rgba(0, 0, 0, .1);
  --button-hover-box-shadow-lg: 0 4px 0 0 rgba(0, 0, 0, .1);

  /*--button-box-shadow-xl: 4px 4px 5px 0 rgba(0, 0, 0, .2);*/
  /*--button-hover-box-shadow-xl: 2px 2px 5px 0 rgba(0, 0, 0, .2);*/
  --button-box-shadow-xl: none;
  --button-hover-box-shadow-xl: none;

  --dark-text-color: #1a2d4f;
  --default-text-color: rgb(25, 29, 31);
  --light-text-color: var(--default-60);
  --default-hover-color: #fafafa;
  --success-hover: rgba(32, 152, 32, 0.1);

  --alert: #f5bf35;
  --warn: #DB642A;
  --danger: var(--error-300);
  --bg-danger: var(--error-100);
  --success: var(--success-300);
  --bg-success: var(--success-50);

  --font-size-sm: .8rem;
  --font-size-xs: .6rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.6rem;
  --font-size-xxl: 2rem;

  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-bold: 600;


  /*Button Colors*/
  --button-primary: var(--primary-dark-800);
  --button-default: var(--white);
  --button-default-hover: var(--light-gray);
  --button-danger: var(--danger);
  --button-success: var(--success);

  /*Status Backgrounds */
  --bg-status-default: #eef0f2;
  --bg-status-success: var(--success-50);
  --bg-status-error: var(--error-100);

  --text-status-default: var(--default-text-color);

  --text-status-success: var(--success);

  --text-status-error: var(--error-300);


  /*margins*/
  --margin-xs: .2rem;
  --margin-sm: .5rem;
  --margin-md: .7rem;
  --margin-lg: 1rem;
  --margin-xl: 1.5rem;
  --margin-xxl: 2.5rem;
  --margin-mega: 4rem;


  /*padding*/
  --padding-xs: .3rem;
  --padding-sm: .6rem;
  --padding-md: .8rem;
  --padding-lg: 1rem;
  --padding-xl: 1.5rem;
  --padding-mega: 2.5rem;
  --box-padding-input: .6rem 1rem;

  --button-md-padding: .5rem 1rem;


  /*border-radius*/
  --border-radius-sm: 4px;
  --border-radius-md: 7px;
  --border-radius-lg: 10px;
  --border-radius-round: 2em;


  /*main component sizes*/
  --nav-width: 250px;

  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  --chart-color-1: #1AA7F1;
  --chart-color-2: #7FD1FC;
  --chart-color-3: #0291DC;
  --chart-color-4: #06245D;
  --chart-color-5: #003499;

}
