// Sass variables
// Neutral/grey
$ds-color-neutral-50: #fafafa;
$ds-color-neutral-100: #f2f2f2;
$ds-color-neutral-200: #e6e6e6;
$ds-color-neutral-300: #d6d6d6;
$ds-color-neutral-400: #c7c7c7;
$ds-color-neutral-500: #b5b5b5;
$ds-color-neutral-600: #a1a1a1;
$ds-color-neutral-700: #8a8a8a;
$ds-color-neutral-800: #6b6b6b;
$ds-color-neutral-900: #383838;
$ds-color-neutral-950: #262626;

// Green
$ds-color-green-50: #f2f8f5;
$ds-color-green-100: #e3f2eb;
$ds-color-green-200: #c0e7d6;
$ds-color-green-300: #8adbb7;
$ds-color-green-400: #38cc89;
$ds-color-green-500: #26b072;
$ds-color-green-600: #158954;
$ds-color-green-700: #19754c;
$ds-color-green-800: #196241;
$ds-color-green-900: #164630;
$ds-color-green-950: #112c20;

// Yellow
$ds-color-yellow-50: #fffaeb;
$ds-color-yellow-100: #fff7db;
$ds-color-yellow-200: #ffeeb8;
$ds-color-yellow-300: #ffe58f;
$ds-color-yellow-400: #ffda61;
$ds-color-yellow-500: #ffcc20;
$ds-color-yellow-600: #f0b800;
$ds-color-yellow-700: #d1a000;
$ds-color-yellow-800: #ad8500;
$ds-color-yellow-900: #806200;
$ds-color-yellow-950: #574200;

// Red
$ds-color-red-50: #fff5f7;
$ds-color-red-100: #fee7eb;
$ds-color-red-200: #fdc9d3;
$ds-color-red-300: #fba7b7;
$ds-color-red-400: #f97b92;
$ds-color-red-500: #f51d43;
$ds-color-red-600: #e60a32;
$ds-color-red-700: #c3092b;
$ds-color-red-800: #a10723;
$ds-color-red-900: #75051a;
$ds-color-red-950: #530412;

// Blue
$ds-color-blue-50: #f7fafd;
$ds-color-blue-100: #ecf2f9;
$ds-color-blue-200: #d4e3f2;
$ds-color-blue-300: #bdd4ea;
$ds-color-blue-400: #a2c3e2;
$ds-color-blue-500: #7facd7;
$ds-color-blue-600: #5893cb;
$ds-color-blue-700: #3470a8;
$ds-color-blue-800: #2b5d8c;
$ds-color-blue-900: #1e4161;
$ds-color-blue-950: #17314a;

// Teal
$ds-color-teal-50: #f1f8f8;
$ds-color-teal-100: #e3f2f1;
$ds-color-teal-200: #c1e2df;
$ds-color-teal-300: #9ed1cd;
$ds-color-teal-400: #6dbab4;
$ds-color-teal-500: #4a9d96;
$ds-color-teal-600: #438e88;
$ds-color-teal-700: #3b7d77;
$ds-color-teal-800: #2f6460;
$ds-color-teal-900: #244c49;
$ds-color-teal-950: #193432;

// Black and white
$ds-color-white: #fff;
$ds-color-black: #000;

// CSS custom properties
:root {
  // Neutral/grey
  --ds-color-neutral-50: #{$ds-color-neutral-50};
  --ds-color-neutral-100: #{$ds-color-neutral-100};
  --ds-color-neutral-200: #{$ds-color-neutral-200};
  --ds-color-neutral-300: #{$ds-color-neutral-300};
  --ds-color-neutral-400: #{$ds-color-neutral-400};
  --ds-color-neutral-500: #{$ds-color-neutral-500};
  --ds-color-neutral-600: #{$ds-color-neutral-600};
  --ds-color-neutral-700: #{$ds-color-neutral-700};
  --ds-color-neutral-800: #{$ds-color-neutral-800};
  --ds-color-neutral-900: #{$ds-color-neutral-900};
  --ds-color-neutral-950: #{$ds-color-neutral-950};

  // Green
  --ds-color-green-50: #{$ds-color-green-50};
  --ds-color-green-100: #{$ds-color-green-100};
  --ds-color-green-200: #{$ds-color-green-200};
  --ds-color-green-300: #{$ds-color-green-300};
  --ds-color-green-400: #{$ds-color-green-400};
  --ds-color-green-500: #{$ds-color-green-500};
  --ds-color-green-600: #{$ds-color-green-600};
  --ds-color-green-700: #{$ds-color-green-700};
  --ds-color-green-800: #{$ds-color-green-800};
  --ds-color-green-900: #{$ds-color-green-900};
  --ds-color-green-950: #{$ds-color-green-950};

  // Yellow
  --ds-color-yellow-50: #{$ds-color-yellow-50};
  --ds-color-yellow-100: #{$ds-color-yellow-100};
  --ds-color-yellow-200: #{$ds-color-yellow-200};
  --ds-color-yellow-300: #{$ds-color-yellow-300};
  --ds-color-yellow-400: #{$ds-color-yellow-400};
  --ds-color-yellow-500: #{$ds-color-yellow-500};
  --ds-color-yellow-600: #{$ds-color-yellow-600};
  --ds-color-yellow-700: #{$ds-color-yellow-700};
  --ds-color-yellow-800: #{$ds-color-yellow-800};
  --ds-color-yellow-900: #{$ds-color-yellow-900};
  --ds-color-yellow-950: #{$ds-color-yellow-950};

  // Red
  --ds-color-red-50: #{$ds-color-red-50};
  --ds-color-red-100: #{$ds-color-red-100};
  --ds-color-red-200: #{$ds-color-red-200};
  --ds-color-red-300: #{$ds-color-red-300};
  --ds-color-red-400: #{$ds-color-red-400};
  --ds-color-red-500: #{$ds-color-red-500};
  --ds-color-red-600: #{$ds-color-red-600};
  --ds-color-red-700: #{$ds-color-red-700};
  --ds-color-red-800: #{$ds-color-red-800};
  --ds-color-red-900: #{$ds-color-red-900};
  --ds-color-red-950: #{$ds-color-red-950};

  // Blue
  --ds-color-blue-50: #{$ds-color-blue-50};
  --ds-color-blue-100: #{$ds-color-blue-100};
  --ds-color-blue-200: #{$ds-color-blue-200};
  --ds-color-blue-300: #{$ds-color-blue-300};
  --ds-color-blue-400: #{$ds-color-blue-400};
  --ds-color-blue-500: #{$ds-color-blue-500};
  --ds-color-blue-600: #{$ds-color-blue-600};
  --ds-color-blue-700: #{$ds-color-blue-700};
  --ds-color-blue-800: #{$ds-color-blue-800};
  --ds-color-blue-900: #{$ds-color-blue-900};
  --ds-color-blue-950: #{$ds-color-blue-950};

  // Teal
  --ds-color-teal-50: #{$ds-color-teal-50};
  --ds-color-teal-100: #{$ds-color-teal-100};
  --ds-color-teal-200: #{$ds-color-teal-200};
  --ds-color-teal-300: #{$ds-color-teal-300};
  --ds-color-teal-400: #{$ds-color-teal-400};
  --ds-color-teal-500: #{$ds-color-teal-500};
  --ds-color-teal-600: #{$ds-color-teal-600};
  --ds-color-teal-700: #{$ds-color-teal-700};
  --ds-color-teal-800: #{$ds-color-teal-800};
  --ds-color-teal-900: #{$ds-color-teal-900};
  --ds-color-teal-950: #{$ds-color-teal-950};

  // Black and white
  --ds-color-white: #{$ds-color-white};
  --ds-color-black: #{$ds-color-black};
}
