$colors: (
  'main',
  'gray-1',
  'gray-2',
  'gray-3',
  'gray-4',
  'gray-5',
  'gray-6',
  'invert',
  'none',

  'black',
  'white',

  'dscout-light',
  'dscout',
  'dscout-dark',
  'dscout-darkest',

  'alert-light',
  'alert',
  'alert-dark',
  'alert-darkest',

  'coachmark-light',
  'coachmark',
  'coachmark-dark',
  'coachmark-darkest',

  'close-light',
  'close',
  'close-dark',
  'close-darkest',

  'success-light',
  'success',
  'success-dark',
  'success-darkest',

  'archive-light',
  'archive',
  'archive-dark',
  'archive-darkest',

  'note-light',
  'note',
  'note-dark',
  'note-darkest',

  'marker-light',
  'marker',
  'marker-dark',
  'marker-darkest',

  'test-light',
  'test',
  'test-dark',
  'test-darkest',

  'diary',
  'live',
  'screener',

  'part-0',
  'part-1',
  'part-2',
  'part-3',
  'part-4',
  'part-5',
  'part-6',
  'part-7',
  'part-8',
  'part-9',

  'gray-25',
  'gray-50',
  'gray-100',
  'gray-200',
  'gray-300',
  'gray-500',
  'gray-800',

  'green-100',
  'green-300',
  'green-500',
  'green-600',
  'green-700',
  'green-900',
  'green-925',
  'green-950',

  'red-50',
  'red-100',
  'red-300',
  'red-500',
  'red-600',
  'red-700',

  'purple-100',
  'purple-300',
  'purple-500',
  'purple-600',
  'purple-700',

  'blue-50',
  'blue-100',
  'blue-300',
  'blue-500',
  'blue-600',
  'blue-700',

  'sea-100',
  'sea-300',
  'sea-500',
  'sea-600',
  'sea-700',

  'sky-100',
  'sky-300',
  'sky-500',
  'sky-600',
  'sky-700',

  'caribbean-100',
  'caribbean-300',
  'caribbean-500',
  'caribbean-600',
  'caribbean-700',

  'amethyst-100',
  'amethyst-300',
  'amethyst-500',
  'amethyst-600',
  'amethyst-700',

  'rose-100',
  'rose-300',
  'rose-500',
  'rose-600',
  'rose-700',

  'tomato-100',
  'tomato-300',
  'tomato-500',
  'tomato-600',
  'tomato-700',

  'gold-100',
  'gold-300',
  'gold-500',
  'gold-600',
  'gold-700',

  'sand-100',
  'sand-300',
  'sand-500',
  'sand-600',
  'sand-700',

  'jungle-100',
  'jungle-300',
  'jungle-500',
  'jungle-600',
  'jungle-700',

  'lime-100',
  'lime-300',
  'lime-500',
  'lime-600',
  'lime-700',

  'ai-purple-50',
  'ai-purple-100',
  'ai-purple-300',
  'ai-purple-500',
  'ai-purple-600',
  'ai-purple-700',
  'ai-purple-800',

  'ai-pink-50',
  'ai-pink-100',
  'ai-pink-300',
  'ai-pink-500',
  'ai-pink-600',
  'ai-pink-700',
  'ai-pink-800',
);

$gradients: (
  'ai-light-a',
  'ai-a',
  'ai-reverse-a',

  'ai-light-b',
  'ai-b',
);

@each $enum in $colors {
  .color--#{$enum} { color: var(--color--#{$enum}); }
  .bg-color--#{$enum} { background-color: var(--color--#{$enum}); }
  .b-color--#{$enum} { border-color: var(--color--#{$enum}); }
}

@each $enum in $gradients {
  .bg-gradient--#{$enum} { background-image: var(--gradient--#{$enum}); }
}