// Cria classes de cor para plano de fundo
@each $color in "base", "alternative" {
  @each $type in "main", "contrast" {
    .bg-#{$type}-#{$color} {
      @if $type == "contrast" {
        @include contrast-mode;
      }

      background-color: var(--theme-surface-#{$type}-#{$color});
      color: var(--theme-surface-text-#{$type}-#{$color});
    }
  }
}

@each $color in "main", "contrast" {
  @each $type in "interactive", "cta" {
    .bg-#{$type}-#{$color} {
      @if $color == "main" {
        @include contrast-mode;
      }

      background-color: var(--theme-#{$type}-#{$color});
      color: var(--theme-#{$type}-text-#{$color});
    }
  }
}

@each $color in "success", "alert", "error" {
  .bg-#{$color} {
    @if $color != "alert" {
      @include contrast-mode;
    }

    background-color: var(--theme-#{$color}-main);
    color: var(--theme-#{$color}-text);
  }
}

// Cria classes de cor para border
@each $color in "base", "alternative" {
  .border-color-#{$color} {
    border-color: var(--theme-border-#{$color});
  }
}

@each $color in "main", "contrast" {
  @each $type in "interactive", "cta" {
    .border-color-#{$type}-#{$color} {
      border-color: var(--theme-#{$type}-#{$color});
    }
  }
}

@each $color in "success", "alert", "error" {
  .border-color-#{$color} {
    border-color: var(--theme-#{$color}-main);
  }
}

// Cria classes de cor para textos
@each $color in "base", "alternative" {
  @each $type in "main", "contrast" {
    .text-#{$type}-#{$color} {
      color: var(--theme-text-#{$type}-#{$color});
    }
  }
}

@each $color in "main", "contrast" {
  @each $type in "interactive", "cta" {
    .text-#{$type}-#{$color} {
      color: var(--theme-#{$type}-#{$color});
    }
  }
}

@each $color in "success", "alert", "error" {
  .text-#{$color} {
    color: var(--theme-#{$color}-main);
  }
}