/****************************************************************************
*	File Name : 			colours.css
*
*	Date Created :			2019-10-10
*	Date Modified:       
*
*  Handles the colors across the site
*
*  ESC colors: Blue        #002939
*              Orange      #ff8300
*
*******************************************************************************/

/* CSS Variables */
:root {
  --red: #D62E2E;
  --light-red: #ffe3e3;
  --yellow: #fdd329;
  --light-yellow: #fff9df;
  --green: #8bc53f;
  --esc-orange: #FF8300;
  --esc-orange-shade2: #ffca92;
  --esc-orange-shade3: #fff0df;
  --esc-blue: #002939;
  --gray-shade1: #f7f7f7;
  --gray-shade2: #e7e7e7;
  --gray-shade3: #dbdbdb;
  --gray-shade4: #bebebe;
  --gray-shade5: #757575; /* Changed for accessibility */
  --light-blue: #eff5fc;
  --light-blue2: #e6f2ff;
  --light-blue-hover: #00678F;
  --light-green: #d3edd5;
  --hyperlink-blue: #0066cc;
  --td-green: #008A00;
  --td-dark-green: #0d7c16;
}

/* ESC primary colours */
.esc-orange {
	color: var(--esc-orange);
}
.esc-orange-bg {
  background-color: var(--esc-orange);
}
  .esc-orange-bg:not(:disabled):not(.disabled):hover {
    background-color: #DB7200;
  }

.esc-blue {
	color: var(--esc-blue);
}
a.esc-blue:hover,
.esc-blue.hover:hover {
	color: var(--light-blue-hover);
}
.esc-blue-bg {
  background-color: var(--esc-blue);
}
.esc-blue-bg:not(:disabled):not(.disabled):hover {
  background-color: var(--light-blue-hover);
}

.light-blue {
  color: var(--light-blue);
}
.light-blue-bg {
  background: var(--light-blue);
}

.td-green {
    color: var(--td-green);
}

.td-green-bg {
    background-color: var(--td-green);
}

.td-green-bg:not(:disabled):not(.disabled):hover {
    background-color: var(--td-dark-green);
}


/* grays - lightest to darkest */
.gray-shade1 {
  color: #f7f7f7;
}
.gray-shade1-bg {
  background-color: #f7f7f7;
}
.gray-shade2 {
  color: #e7e7e7;
}
.gray-shade2-bg {
  background-color: #e7e7e7 !important;
}
.gray-shade3 {
  color: #dbdbdb;
}
.gray-shade3-bg {
  background-color: #dbdbdb !important;
}
.gray-shade4 {
  color: #bebebe;
}
.gray-shade5 {
  color: #757575; /* Changed for accessibility */
}
.gray-shade6 {
  color: #4a4a4a;
}

.red {
  color: var(--red);
}
.red-bg {
  background-color: var(--red);
}
.notice-colour {
  color: #E00000;
}
.green {
  color: #8bc53f;
}
.white {
  color: #fff;
}
.yellow {
  color: var(--yellow);
}
.yellow-bg {
  background-color: var(--yellow);
}