.bg-brand {
  background-color: var(--color-brand);
  color: var(--color-brand-text);

}
.bg-brand h1,
.bg-brand h2,
.bg-brand h3,
.bg-brand h4,
.bg-brand h5,
.bg-brand h6,
.bg-brand .medium,
.bg-brand .large,
.bg-brand .xlarge {
  color: var(--color-white);
}

.bg-light {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.bg-light-muted {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.bg-dark {
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);

  --color-link: var(--color-brand);
  --color-link-hover: var(--color-brand-hc-light);

  --color-card-bg: var(--color-gray-900);
  --color-card-border: var(--color-gray-700);
  --color-card-bg-hover: var(--color-gray-800);
  --color-card-icon: var(--color-gray-400);
  --color-card-icon-hover: var(--color-white);
  --color-card-text: var(--color-gray-400);
  --color-card-text-hover: var(---color-white);

}
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark .medium,
.bg-dark .large,
.bg-dark .xlarge,
.bg-dark a {
  color: var(--color-white);
}

.bg-dark a {
  background-image: linear-gradient(
    var(--color-white-40),
    var(--color-white-40)
    );
  }

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

.bg-none,
.bg-none a,
.bg-none a:link,
.bg-none a:visited {
  background: none;
}

.text-light {
  color: var(--color-white);

}
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light .medium,
.text-light .large,
.text-light .xlarge {
  color: var(--color-white);
}