// SCSS implementation of light color theme
@use 'palette' as *;
@use 'colors-base' as *;

// Highlight levels
$H050: palette($primary-color, 50);
$H100: palette($primary-color, 100);
$H200: palette($primary-color, 200);
$H300: palette($primary-color, 300);
// Generate a distinct color for level 400 using the palette function instead of using base color
$H400: palette($primary-color, 400);
$H500: $primary-color;  // Level 500 uses the base color directly
$H600: palette($primary-color, 600);
$H700: palette($primary-color, 700);
$H800: palette($primary-color, 800);
$H900: palette($primary-color, 900);

// Gray levels
$B000: #fff;
$B050: #f7f7fa;
$B100: #f2f2f5;
$B200: #e5e5ea;
$B300: #d9d9d9;
$B400: #b6b7b8;
$B500: #939393;
$B600: #717273;
$B700: #575757;
$B800: #343434;
$B900: #121212;

// Secondary palette

// Red
$red-50: palette($red, 50);
$red-100: palette($red, 100);
$red-200: palette($red, 200);
$red-300: palette($red, 300);
$red-400: palette($red, 400);
$red-500: $red;
$red-600: palette($red, 600);
$red-700: palette($red, 700);
$red-800: palette($red, 800);
$red-900: palette($red, 900);

// Orange
$orange-50: palette($orange, 50);
$orange-100: palette($orange, 100);
$orange-200: palette($orange, 200);
$orange-300: palette($orange, 300);
$orange-400: palette($orange, 400);
$orange-500: $orange;
$orange-600: palette($orange, 600);
$orange-700: palette($orange, 700);
$orange-800: palette($orange, 800);
$orange-900: palette($orange, 900);

// Yellow
$yellow-50: palette($yellow, 50);
$yellow-100: palette($yellow, 100);
$yellow-200: palette($yellow, 200);
$yellow-300: palette($yellow, 300);
$yellow-400: palette($yellow, 400);
$yellow-500: $yellow;
$yellow-600: palette($yellow, 600);
$yellow-700: palette($yellow, 700);
$yellow-800: palette($yellow, 800);
$yellow-900: palette($yellow, 900);

// Green
$green-50: palette($green, 50);
$green-100: palette($green, 100);
$green-200: palette($green, 200);
$green-300: palette($green, 300);
$green-400: palette($green, 400);
$green-500: $green;
$green-600: palette($green, 600);
$green-700: palette($green, 700);
$green-800: palette($green, 800);
$green-900: palette($green, 900);

// Cyan
$cyan-50: palette($cyan, 50);
$cyan-100: palette($cyan, 100);
$cyan-200: palette($cyan, 200);
$cyan-300: palette($cyan, 300);
$cyan-400: palette($cyan, 400);
$cyan-500: $cyan;
$cyan-600: palette($cyan, 600);
$cyan-700: palette($cyan, 700);
$cyan-800: palette($cyan, 800);
$cyan-900: palette($cyan, 900);

// Blue
$blue-50: palette($blue, 50);
$blue-100: palette($blue, 100);
$blue-200: palette($blue, 200);
$blue-300: palette($blue, 300);
$blue-400: palette($blue, 400);
$blue-500: $blue;
$blue-600: palette($blue, 600);
$blue-700: palette($blue, 700);
$blue-800: palette($blue, 800);
$blue-900: palette($blue, 900);

// Violet
$violet-50: palette($violet, 50);
$violet-100: palette($violet, 100);
$violet-200: palette($violet, 200);
$violet-300: palette($violet, 300);
$violet-400: palette($violet, 400);
$violet-500: $violet;
$violet-600: palette($violet, 600);
$violet-700: palette($violet, 700);
$violet-800: palette($violet, 800);
$violet-900: palette($violet, 900);