/* note: we are loading this file in and parsing it for var/value pairs */
/* so keep the css clean and nicely delimited */

:root {

  /*
   =====================================================================
   BASE VARIABLES
   ---------------------------------------------------------------------
   Reusable styles to be used system wide, all components should
   reference these variables as much as possible
   ===================================================================== */

    /* OLD COLOUR PALETTE */
/*    --color-primary-dark:             #0D0C42;
    --color-primary:                  #1C1B85;
    --color-primary-light:            #2B2ACE;
    --color-primary-lighter:          #AFAFE9;
    --color-primary-lightest:         #E9E9FD;
    --color-primary-bright:           #3737f8;*/

    --color-primary-darkest:          #08111D;
    --color-primary-darker:           #001937;
    --color-primary-dark:             #121944;
    --color-primary:                  #005088;
    --color-primary-light:            #2871b7;
    --color-primary-lighter:          #AFAFE9;
    --color-primary-lightest:         #E9E9FD;
    --color-primary-bright:           #00b1da;

    --color-secondary-dark:           #007AAD;
    --color-secondary:                #09AECE;
    --color-secondary-light:          #42D4F0;
    --color-secondary-lighter:        #9AD4E8;
    --color-secondary-lightest:       #edfafc; /*#EBFCFF; */
    --color-secondary-bright:         #5dc5dd;

    --color-success-dark:             #004C45;
    --color-success:                  #008162;
    --color-success-light:            #7AE1BF;
    --color-success-lighter:          #95D9C2;
    --color-success-lightest:         #EFFFFA;
    --color-success-bright:           #03b88c;

    --color-warning-dark:             #e67700;
    --color-warning:                  #f08c00;
    --color-warning-light:            #ffd43b;
    --color-warning-lighter:          #ffec99;
    --color-warning-lightest:         #fff9db;
    --color-warning-bright:           #f08c00;


    --color-error-dark:               #610316;
    --color-error:                    #CF1124;
    --color-error-light:              #EF4E4E;
    --color-error-lighter:            #f18788;
    --color-error-lightest:           #FFE3E3;
    --color-error-bright:             #EF4E4E;

    --color-grey-darkest: #1F2933;
    --color-grey-darker: #323F4B;
    --color-grey-dark: #3E4C59;
    --color-grey-mid-dark: #52606D;
    --color-grey-mid: #616E7C;
    --color-grey-mid-light: #7B8794;
    --color-grey-light: #9AA5B1;
    --color-grey-lighter: #CBD2D9;
    --color-grey-lighter2: #E4E7EB;
    --color-grey-lightest: #F5F7FA;

    /* todo: refactor instances of this to use above */
  --grey-darkest: #1F2933;
  --grey-darker: #323F4B;
  --grey-dark: #3E4C59;
  --grey-mid-dark: #52606D;
  --grey-mid: #616E7C;
  --grey-mid-light: #7B8794;
  --grey-light: #9AA5B1;
  --grey-lighter: #CBD2D9;
  --grey-lighter2: #E4E7EB;
  --grey-lightest: #F5F7FA;

  /* foreground colours */
  --foreground: #08090A;
  --foreground-secondary: #41474D;
  --foreground-tertiary: #797C80;
  --foreground-quaternary: #F4FAFF;
  --foreground-light: #41474D;

  /* background colours */
  --background: #F2F5FA;//#f8f8f8;
  --background-secondary: #A3B9CC;
  --background-tertiary: #5C7D99;
  --background-light: #FFFFFF;

  /* primary colours */
  --primary-dark: #0f0e44;

  /* secondary colours */
  --secondary: #09AECE;
  --secondary-dark: #0f0e44;

  --highlight: rgba(0,171,204,.06);
  --highlight-secondary: rgba(0,0,0,.02);

  /* error colours */
  --error: #EF3E36;
  --error-dark: #800600;
  --error-light: #FFCECC;

  /* misc colours */
  --background-tertiary-shadow: 0 1px 3px 0 rgba(92, 125, 153, 0.5);
  --notification: #894BAC;
  /*
   =====================================================================
   COMPONENTS
   ---------------------------------------------------------------------
   Please try and keep this list short to just key components that will
   have a big impact on the overall look and feel (ie. global navigation
   ===================================================================== */

  --aut-global-navigation-background-body : var(--color-primary-dark);/*#121944;*/
  --aut-global-navigation-bg-color-header: var(--color-primary-dark);
  --aut-global-navigation-bg-color-body:   var(--color-primary-dark);
  --aut-global-navigation-bg-color-footer: var(--color-primary-dark);
  --aut-login-panel-bg : var(--color-primary-darkest);
  --aut-login-main-bg : var(--color-primary-darkest);
  --aut-button-primary: #333387;
  --aut-button-primary-hover: #3F3F9CFF;

  --aut-global-item-color-selected: var(--color-primary-bright);

  --aut-button-radius: 0px;
  --aut-link-primary: #2A3949; //#5bc0de;
  --aut-link-secondary: #2a71b7;
  --aut-selected-color: var(--secondary);
  --aut-selected-background: rgba(100,188,201,0.1);
  --aut-de-selected-secondary: #e4e7f1;
  --aut-hover-background: rgba(15, 36, 62, 0.02);
  --aut-hover-background-secondary: var(--aut-selected-background);
  --aut-divider-border: 1px solid rgba(0,0,0,0.08);

  --aut-shadow-level-0: 2px 2px 0px 0px rgba(50, 50, 105, 0.05);
  --aut-shadow-level-1: 4px 10px 14px rgba(190,192,212, .20), 0 2px 4px rgba(125,154,191, .17);
  /* --aut-shadow-level-1: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;*/
  --aut-shadow-level-4: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  --aut-shadow-diffuse: 0 8px 32px rgba(194, 203, 216, 0.16);

  --aut-shadow-stripe-1: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --aut-shadow-stripe-2: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --aut-shadow-stripe-3: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  --aut-shadow-stripe-4: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  --aut-shadow-stripe-5: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  --aut-shadow-stripe-6: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}