:root {
  --system-white: #fff;

  --system-coal-100: #5b6574;
  --system-coal-200: #333f52;
  --system-coal-300: #283241;

  --system-ivory-100: #f9f4ed;
  --system-ivory-200: #f2ead9;
  --system-ivory-300: #e8d8be;

  --system-green-100: #32c7b1;
  --system-green-200: #00b99e;
  --system-green-300: #00947e;

  --system-gray-100: #fafafa;
  --system-gray-200: #f2f2f2;
  --system-gray-250: #e9ecef;
  --system-gray-300: #e5e5e5;
  --system-gray-350: #ced4da;
  --system-gray-400: #b3b3b3;
  --system-gray-500: #767676;
}

body {
  background-color: var(--system-gray-300);
}

#main-menu-toggler-icon {
  background-color: var(--system-green-300);
}

hr {
  border: 1px solid var(--system-gray-400);
}

form a {
  color: var(--system-coal-300);
}

.title--icon > span {
  color: var(--system-gray-400);
}

.breadcrumb, th {
  color: var(--system-gray-400);
}

table {
  background-color: var(--system-white);
}

td > a {
  color: var(--system-coal-100);
}

td > a:hover {
  color: var(--system-coal-300);
}

td > a:visited {
  color: var(--system-coal-300);
}

.empty-state > p {
  color: var(--system-gray-400);
}

form select {
  background-color: rgba(0, 0, 0, 0.1);
}

form .helptext {
  color: var(--system-gray-400);
}

.warning {
  stroke: var(--system-coal-100);
  border: 1px solid var(--system-gray-350);
  background-color: var(--system-gray-250);
}

.card {
  background-color: var(--system-white);
}

.card--dark {
  color: var(--system-white);
  background-color: var(--system-coal-200);
}

.card--dark p {
  color: var(--system-gray-100);
}

#clipboard-landing {
  background: var(--system-white);
  color: var(--system-coal-100);
}

p.muted,
span.muted {
  color: var(--system-gray-500);
}

.card--dark > p.muted {
  color: var(--system-gray-400);
}

#env-banner {
  background-color: var(--system-green-300);
}

aside {
  color: var(--system-coal-300);
  background: var(--system-gray-200);
}

aside nav li a:hover {
  background-color: var(--system-coal-100);
}

aside nav li a.active {
  color: var(--system-white);
  background-color: var(--system-coal-300);
}

aside nav li > span {
  color: var(--system-gray-400);
}

aside nav li a:hover,
aside nav li a.active {
  color: var(--system-white);
  background-color: var(--system-coal-300);

  svg.icon {
    fill: var(--system-green-200);
  }

  svg.icon--stroke {
    stroke: var(--system-green-200);
  }
}

aside nav li a:hover {
  background-color: var(--system-coal-200);
}