@import "../sources/web/main.css";
:root {
  /*  FONTS  */
  --principal-font: "Poppins", sans-serif;
  --font-text: "Roboto", sans-serif;
  --font-size-08: 0.8em;
  --font-size-1: 1em;
  --font-size-2: 1.35em;
  --font-size-3: 1.8em;
  --font-size-4: 2.2em;
  /*  BORDERS  */
  --border-radius: 8px;
  --border-radius-2: 16px;
  --border-radius-3: 24px;
  --highlight-card-image: 50%;
  /*  IMAGES  */
  --tick-icon: url("https://cdn.myivhq.com/integration/assets/icons/icons/tick-ivhq-26d27e36.svg");
  --tick-mini-icon: url("https://cdn.myivhq.com/integration/assets/icons/tick-ivhq-mini-5790c18f.png");
  --check-icon: url("https://cdn.myivhq.com/integration/assets/icons/check-ivhq-b4418158.png");
  --check-mini-icon: url("https://cdn.myivhq.com/integration/assets/icons/check-ivhq-mini-5790c18f.png");
  /*  PADDING  */
  --padded-section: 40px 0;
  --top-padded-section: 40px 0 0 0;
  /*  BOX SHADOW  */
  --card-shadow: rgba(0, 0, 0, 0.15) 0px 5px 25px;
  /*  COLOR SYSTEM  */
  --white: #FFFFFF;
  --gray-100: #F9F9F9;
  --aside-card: #F6F6F6;
  --gray-200: #ECECEC;
  --gray-300: #E1E1E1;
  --gray-400: #D3D3D3;
  --gray-500: #B5B5B5;
  --gray-600: #8E8E8E;
  --gray-700: #4F4F4F;
  --gray-800: #3A3A3A;
  --gray-900: #242424;
  --black: #000000;
  --green-light: #A5D25B;
  --green-lighter: #D5EAB2;
  --green-dark: #216E38;
  --green: #288744;
  --blue-dark: #2F3F4C;
  --blue: #007F9B;
  --blue-light: #A4E0DF;
  --blue-lighter: #D2F1F3;
  --blue-lightest: #F3F9FA;
  --blue-gray: #1B3339;
  --navy-dark: #23373f;
  --navy: #2B464E;
  --beige-dark: #CAC0AA;
  --beige: #EFEAE0;
  --brown-dark: #662600;
  --brown: #953800;
  --orange-dark: #C67500;
  --orange: #FFA500;
  --red-dark: #96171B;
  --red-light: #EC8B94;
  --red: #C53135;
  --yellow-light: #fcf8e3;
  --yellow-dark: #FFDC64;
  --yellow: #FFF082;
  --success: #288744;
  --info: #007F9B;
  --warning: #FFF082;
  --danger: #C53135;
  --light: #ECECEC;
  --dark: #3A3A3A;
  --nav-text: #212529;
  --grey: #F3F5F6;
  --grey-medium: #A8A8A8;
  --light-grey: #FBFDFD;
  --dark-grey: #899299;
  --darkest-blue: #2F3F4C;
  --text: #383838;
  --text-color: var(--text);
  /* BRAND COLORS */
  --primary: #288744;
  --brand: #288744;
  --secondary: #007F9B;
  --primary-light: #f0fbf4;
  --secondary-light: #f7feff;
  /*  HEADER COLORS  */
  --brand-header: var(--brand);
  /*  HOVER COLORS  */
  --primary-hover: #22733a;
  --brand-hover: #22733a;
  --green-hover: #22733a;
  --secondary-hover: #006a82;
  --dark-hover: #25323c;
  --orange-hover: #e69500;
  /*  HOVER EFFECTS  */
  --hover-bg: #fff;
  --hover-text-color: #2F3F4C;
  --hover-border: #fff;
  --hover-card-bg: #fff;
  --hover-card-text: #383838;
  --hover-border-bottom: #288744;
  --carousel-item-title-bg: rgba(32, 45, 63, 0.9);
  --carousel-item-title-color: #fff;
  --hover-carousel-item-title-bg: rgba(32, 45, 63, 0.9);
  --glow-color: #a5d25b70;
  /*  DISPLAY  */
  --transparent: rgba(0,0,0,0.0);
  --darker: rgba(0,0,0,0.15);
  --lighter: rgba(255,255,255,0.15);
  /* To allow mood styles (info, warning, alert)*/
  --mood-sign: var(--darker);
}

body, .light-theme {
  --bg-color: #fdfdfd;
  --text: var(--text);
  --text-faded: var(--gray-500);
  --link-color: var(--primary);
  --link-btn-color: var(--white);
  --hover-effect: var(--darker);
}

.dark-theme {
  --text: #FFF;
  --text-color: var(--text);
  --link-color: var(--text);
  --hover-effect: var(--lighter);
  /*  HOVER EFFECTS  */
  --bg-color: var(--navy-dark);
  --hover-bg: var(--darker);
  --hover-text-color: var(--lighter);
  --hover-border: var(--lighter);
}

/* .mood classes will help to organise colouring components that need to use design to highlight a mood or state. Example: warning, info, danger, etc. */
.mood-danger {
  --bg-color: var(--red-light);
  --darker: var(--red);
}

.mood-warning {
  --bg-color: var(--yellow-light);
  --darker: var(--yellow-dark);
}

.mood-info {
  --bg-color: var(--blue-lightest);
  --darker: var(--blue-lighter);
}

.mood-success {
  --bg-color: var(--green-lighter);
  --darker: var(--green-light);
}

.mood-neutral {
  /* Neutral mood likely won't need to change the defualt settings */
}
.mood-neutral .card {
  box-shadow: none;
  border: none;
  padding: 0;
}