:root {
  --navy-blue: #003366;
  --orange-primary: #EB6E1E;
  --orange-hover: #D65A1A;
  --blue-primary: #0056B3;
  --blue-light: #0096D6;
  --purple-primary: #4C63D2;
  --spotcheck-orange: #C85100;

  --cream-bg: #FFF8E7;
  --cream-light: #FEF5E7;
  --main-content-bg: #d1d5db21;

  --text-dark: #333333;
  --text-black: #000000;
  --text-white: #FFFFFF;
  --text-gray: #808080;
  --text-dark-gray: #333;

  --red-error: #DC2626;
  --red-danger: #EF4444;
  --red-dark: #D62828;

  --mood-anxious: #EF4444;
  --mood-uncertain: #F97316;
  --mood-indifferent: #EAB308;
  --mood-relaxed: #84CC16;
  --mood-energised: #22C55E;
  --mood-orange: #FF6F00;
  --mood-yellow: #FFBF00;
  --mood-green: #3CB043;

  --svg-black: #000;
  --svg-white: #FFF;

  --header-height-mobile: 88px;
  --header-height-tablet: 98px;
  --header-height-desktop: 88px;

  --spotcheck-header-height-mobile: 140px;
  --spotcheck-header-height-desktop: 148px;
}

.main-content-bg {
  background: var(--main-content-bg);
}

.checking-header-bg {
  background: var(--navy-blue);
  min-height: 70px;
  display: flex;
  align-items: center;
}

.spotcheck-header-bg {
  background: var(--orange-primary);
}

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

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

.text-navy {
  color: var(--navy-blue);
}

.text-orange {
  color: var(--orange-primary);
}

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

.text-red {
  color: var(--red-error);
}

.bg-orange-primary {
  background-color: var(--orange-primary);
}

.bg-orange-hover:hover {
  background-color: var(--orange-hover);
}

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

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

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

.border-orange-primary {
  border-color: var(--orange-primary);
}

.checking-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.checking-main-content {
  height: calc(100vh - var(--header-height-mobile));
}

@media (min-width: 768px) {
  .checking-main-content {
    height: calc(100vh - var(--header-height-tablet));
  }
}

@media (min-width: 1024px) {
  .checking-main-content {
    height: calc(100vh - var(--header-height-desktop));
  }
}

.spotcheck-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.spotcheck-main-content {
  height: calc(100vh - var(--spotcheck-header-height-mobile));
}

@media (min-width: 1024px) {
  .spotcheck-main-content {
    height: calc(100vh - var(--spotcheck-header-height-desktop));
  }
}

/* Header height classes */
.checking-header {
  height: var(--header-height-mobile);
}

@media (min-width: 768px) {
  .checking-header {
    height: var(--header-height-tablet);
  }
}

@media (min-width: 1024px) {
  .checking-header {
    height: var(--header-height-desktop);
  }
}

.thanks-logo {
  max-width: 50%;
  height: auto;
}