/* stylelint-disable custom-property-empty-line-before, custom-property-pattern */
.bg-brand {
  background-color: var(--color-brand);
  color: var(--color-brand-text);

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & .medium,
  & .large,
  & .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);

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

  & 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);

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