/*==============================================================================
  Settings
==============================================================================*/

:root {
  /* USWDS colors from https://designsystem.digital.gov/design-tokens/color/overview/ */
  --uswds-blue-60v: #005ea2;
  --uswds-blue-warm-70v: #1a4480;
  --uswds-blue-30: #73b3e7;
  --uswds-blue-40: #4f97d1;
  --uswds-gray-5: #f0f0f0;
  --uswds-green-cool-40v: #00a91c;
  --uswds-green-cool-50v: #008817;
  --uswds-green-cool-60v: #216e1f;
  --uswds-red-60v: #b50909;
  --uswds-red-70v: #8b0a03;
  --uswds-red-80v: #5c1111;

  /* Purdue brand colors from https://marcom.purdue.edu/our-brand/visual-language-guideline/ */
  --purdue-aged: #8e6f3e;
  --purdue-steel: #555960;

  /* Spacing tokens */
  --spacer-1: 0.25rem;
}

/*==============================================================================
  Generic styles
==============================================================================*/

body {
  background-image: url(gray-stripes.jpg);
}

/* Darken base link colors to improve color contrast */
a {
  color: var(--uswds-blue-60v);
}

a:hover,
a:focus {
  color: var(--uswds-blue-warm-70v);
}

h1 {
  color: var(--purdue-aged);
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
}

h4 {
  color: var(--purdue-steel);
  font-size: 1rem;
}

cite {
  font-style: italic;
}

/*==============================================================================
  Component styles
==============================================================================*/

/* Link style variation for dark background colors */
.link-light {
  color: var(--uswds-blue-30);
}

.link-light:hover,
.link-light:focus {
  color: var(--uswds-blue-40);
}

/* Improve button color contrast and remove gradient to make color contrast
testing easier */
.btn-success {
  background-color: var(--uswds-green-cool-40v);
  background-image: none;
  color: #000;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  color: #000;
  background-color: var(--uswds-green-cool-50v);
}

.btn-success:active,
.btn-success.active {
  background-color: var(--uswds-green-cool-60v);
}

.btn-danger {
  background-color: var(--uswds-red-60v);
  background-image: none;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  background-color: var(--uswds-red-70v);
}

.btn-danger:active,
.btn-danger.active {
  background-color: var(--uswds-red-80v);
}

.container-padded {
  padding-left: calc(var(--spacer-1) * 5);
  padding-right: calc(var(--spacer-1) * 5);
}

/* Remove navbar gradient to make color contrast testing easier */
.navbar-inverse .navbar-inner {
  background-image: none;
}

.subheader {
  color: var(--purdue-steel);
  font-size: 1.25rem;
  font-weight: bold;
}

.text-error-dark {
  color: var(--uswds-red-60v);
}

/*==============================================================================
  Utility styles
  Generally based on https://tailwindcss.com/
==============================================================================*/

.bg-black {
  background-color: #000000 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-gray-5 {
  background-color: var(--uswds-gray-5) !important;
}

.my-5 {
  margin-bottom: calc(var(--spacer-1) * 5) !important;
  margin-top: calc(var(--spacer-1) * 5) !important;
}

.mb-2 {
  margin-bottom: calc(var(--spacer-1) * 2) !important;
}

.mb-5 {
  margin-bottom: calc(var(--spacer-1) * 5) !important;
}

.pt-5 {
  padding-top: calc(var(--spacer-1) * 5) !important;
}

.pb-12 {
  padding-bottom: calc(var(--spacer-1) * 12) !important;
}

.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.font-bold {
  font-weight: bold !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.align-middle {
  vertical-align: middle !important;
}