@layer utility {
  .brand--info {
    --brand-bg: var(--info-bg);
    --brand-bg-hover: var(--info-bg-hover);
    --brand-bg-active: var(--info-bg-active);
    --brand-bg-low: var(--info-bg-low);
    --brand-bg-low-hover: var(--info-bg-low-hover);
    --brand-bg-low-active: var(--info-bg-low-active);
  }

  .brand--danger {
    --brand-bg: var(--danger-bg);
    --brand-bg-hover: var(--danger-bg-hover);
    --brand-bg-active: var(--danger-bg-active);
    --brand-bg-low: var(--danger-bg-low);
    --brand-bg-low-hover: var(--danger-bg-low-hover);
    --brand-bg-low-active: var(--danger-bg-low-active);
  }

  .brand--success {
    --brand-bg: var(--success-bg);
    --brand-bg-hover: var(--success-bg-hover);
    --brand-bg-active: var(--success-bg-active);
    --brand-bg-low: var(--success-bg-low);
    --brand-bg-low-hover: var(--success-bg-low-hover);
    --brand-bg-low-active: var(--success-bg-low-active);
  }

  .brand--warning {
    --brand-bg: var(--warning-bg);
    --brand-bg-hover: var(--warning-bg-hover);
    --brand-bg-active: var(--warning-bg-active);
    --brand-bg-low: var(--warning-bg-low);
    --brand-bg-low-hover: var(--warning-bg-low-hover);
    --brand-bg-low-active: var(--warning-bg-low-active);
  }

  .brand--emphasize {
    --brand-bg: var(--emphasize-bg);
    --brand-bg-hover: var(--emphasize-bg-hover);
    --brand-bg-active: var(--emphasize-bg-active);
    --brand-bg-low: var(--emphasize-bg-low);
    --brand-bg-low-hover: var(--emphasize-bg-low-hover);
    --brand-bg-low-active: var(--emphasize-bg-low-active);
  }
}