.fizz-surface {
  background-color: $color-background-surface;
}

.fizz-surface-gray {
  background-color: $color-background-highlight;
}

.fizz-surface-gray-inverse {
  background-color: $color-background-subdued;
}

.fizz-surface-red {
  background-color: $color-background-error-subdued;
}

.fizz-surface-blue {
  background-color: $color-background-brand-subdued;
}

.fizz-surface-yellow {
  background-color: $color-background-warning-subdued;
}

.fizz-surface-green {
  background-color: $color-background-success-subdued;
}

.fizz-surface-teal{
  background-color: $color-background-brand-secondary-subdued;
}

.fizz-surface-brand {
  background-color: $color-background-brand;
}

.fizz-surface-brand-secondary {
  background-color: $color-background-brand-secondary;
}

.fizz-surface-inverse {
  background-color: $color-background-inverse;
  color: $color-text-inverse;
}

[class*="subdued"] {
  color: $color-text-subdued;
}

.fizz-text-inverse {
  color: $color-white;
}

.fizz-text-brand {
  color: $color-text-brand;
}

.fizz-text-positive {
  color: $color-text-positive;
}

.fizz-text-interactive {
  color: $color-text-link;
}

.fizz-text-deal {
  color: $color-text-deal;
}

.fizz-text-warning {
  color: $color-text-warning;
}

.fizz-text-negative,
.fizz-text-urgent,
.fizz-text-error {
  color: $color-text-negative;

  a {
    color: inherit;
    text-decoration: underline;
  }
}