Since last few days I have been creating a color system for my few websites but I am completely confused as to what naming system will be good. Can you tell which color system names will be good between version-1 and version-2. And there is none of these, if you have any other version please share.

version – 1

:root{
  
  --color-primary:hsl(247, 50%, 47%);  
  --color-secondary: hsl(51, 77%, 52%);
  /* text colors */
  --color-text-1: hsl(0, 0%, 100%);  
  --color-text-2: hsl(0, 0%, 80%);
  --color-text-3: hsl(0, 0%, 63%);
  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-secondary);
  
   /* bg colors */
  --color-bg-1: hsl(0, 0%, 0%);
  --color-bg-2: hsl(0, 0%, 16%);
  --color-bg-primary: var(--color-primary);
  --color-bg-secondary: var(--color-secondary);

}

version-2

:root{
  
  --color-primary:hsl(247, 50%, 47%);  
  --color-secondary: hsl(51, 77%, 52%);
  
  /* text colors */
  --color-text-primary: hsl(0, 0%, 100%);  
  --color-text-secondary: hsl(0, 0%, 80%);
  --color-text-tertiary: hsl(0, 0%, 63%);
  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-secondary);
  
   /* bg colors */
  --color-bg-primary: hsl(0, 0%, 0%);
  --color-bg-secondary: hsl(0, 0%, 16%);
  --color-bg-primary: var(--color-primary);
  --color-bg-secondary: var(--color-secondary);

}