// Palete
// -------------------------------------------------------------------

$colors: (
  'white': #fff,
  'black': #000,
  'gray': (
    '50': hsl(0deg 0% 99%),
    '100': hsl(0deg 0% 98%),
    '200': hsl(0deg 0% 93%),
    '300': hsl(0deg 0% 88%),
    '400': hsl(0deg 0% 74%),
    '500': hsl(0deg 0% 62%),
    '600': hsl(0deg 0% 46%),
    '700': hsl(0deg 0% 38%),
    '800': hsl(0deg 0% 26%),
    '900': hsl(0deg 0% 13%),
  ),
  'red': (
    '50': hsl(14deg 78% 95%),
    '100': hsl(0deg 100% 90%),
    '200': hsl(0deg 100% 80%),
    '300': hsl(0deg 100% 70%),
    '400': hsl(0deg 100% 60%),
    '500': hsl(0deg 100% 50%),
    '600': hsl(0deg 100% 40%),
    '700': hsl(0deg 100% 35%),
    '800': hsl(6deg 56% 22%),
    '900': hsl(0deg 100% 10%),
  ),
  'orange': (
    '50': hsl(16deg 86% 98%),
    '100': hsl(16deg 86% 90%),
    '200': hsl(16deg 86% 80%),
    '300': hsl(16deg 86% 70%),
    '400': hsl(16deg 86% 58%),
    '500': hsl(16deg 86% 50%),
    '600': hsl(16deg 86% 40%),
    '700': hsl(16deg 86% 30%),
    '800': hsl(16deg 86% 20%),
    '900': hsl(16deg 86% 10%),
  ),
  'yellow': (
    '50': hsl(48deg 100% 98%),
    '100': hsl(48deg 100% 90%),
    '200': hsl(48deg 100% 80%),
    '300': hsl(48deg 100% 70%),
    '400': hsl(48deg 100% 61%),
    '500': hsl(48deg 100% 50%),
    '600': hsl(48deg 100% 40%),
    '700': hsl(48deg 100% 30%),
    '800': hsl(48deg 100% 20%),
    '900': hsl(48deg 100% 10%),
  ),
  'green': (
    '50': hsl(147deg 55% 98%),
    '100': hsl(147deg 55% 90%),
    '200': hsl(147deg 55% 80%),
    '300': hsl(147deg 55% 70%),
    '400': hsl(147deg 55% 60%),
    '500': hsl(147deg 55% 49%),
    '600': hsl(147deg 55% 42%),
    '700': hsl(147deg 55% 30%),
    '800': hsl(147deg 55% 20%),
    '900': hsl(147deg 55% 10%),
  ),
  'neon-green': (
    '50': hsl(155deg 100% 98%),
    '100': hsl(155deg 100% 90%),
    '200': hsl(155deg 100% 80%),
    '300': hsl(155deg 100% 70%),
    '400': hsl(155deg 100% 60%),
    '500': hsl(155deg 100% 50%),
    '600': hsl(155deg 100% 40%),
    // '700': hsl(155deg 100% 27%),
    '700': #4acc3e,
    '800': #30df20,
    '900': hsl(155deg 100% 10%),
  ),
  'teal': (
    '50': hsl(166deg 81% 98%),
    '100': hsl(166deg 81% 90%),
    '200': hsl(166deg 81% 84%),
    '300': hsl(166deg 81% 70%),
    '400': hsl(166deg 81% 60%),
    '500': hsl(166deg 81% 50%),
    '600': hsl(166deg 81% 40%),
    '700': hsl(166deg 81% 30%),
    '800': hsl(166deg 81% 20%),
    '900': hsl(166deg 81% 10%),
  ),
  'aqua': (
    '50': hsl(182deg 100% 98%),
    '100': hsl(182deg 100% 90%),
    '200': hsl(182deg 100% 80%),
    '300': hsl(182deg 100% 70%),
    '400': hsl(182deg 100% 60%),
    '500': hsl(182deg 100% 50%),
    '600': hsl(182deg 100% 40%),
    '700': hsl(182deg 100% 30%),
    '800': hsl(182deg 100% 20%),
    '900': hsl(182deg 100% 10%),
  ),
  'blue': (
    '50': hsl(191deg 100% 98%),
    '100': hsl(191deg 100% 90%),
    '200': hsl(191deg 100% 80%),
    '300': hsl(191deg 100% 70%),
    '400': hsl(191deg 100% 60%),
    '500': hsl(191deg 100% 50%),
    '600': hsl(191deg 100% 37%),
    '700': #1a2b4d,
    '800': hsl(191deg 100% 20%),
    '900': hsl(191deg 100% 10%),
    'hover': #e8eaed,
  ),
  'navy': (
    '50': hsl(207deg 75% 95%),
    '100': hsl(207deg 81% 90%),
    '200': hsl(212deg 81% 80%),
    '300': hsl(212deg 81% 70%),
    '400': hsl(212deg 81% 64%),
    '500': hsl(212deg 81% 50%),
    '600': hsl(212deg 81% 40%),
    '700': hsl(212deg 81% 30%),
    '800': hsl(212deg 54% 24%),
    '900': hsl(212deg 81% 10%),
  ),
);
$brand: (
  'secondary': (
    'background': color('blue-700'),
    'foreground': color('white'),
  ),
  'primary': (
    'background': color('neon-green-700'),
    'background-hover': color('neon-green-800'),
    'background-active': color('green-600'),
    'foreground': color('black'),
    'foreground-hover': color('white'),
    'foreground-active': color('white'),
  ),
);