// :root {
//   --theme-mode: light;
// }
// IMPORTANT! Update spell grey to gray

// white and black
$white-100: hsl(0, 0%, 100%);
$black-100: hsl(0, 0%, 0%);

// primary color guides
$primary-hue: var(--primary-hue);
$primary-saturation: var(--primary-saturation);
$primary-light: var(--primary-light);
// $theme-mode: var(--theme-mode);

$primary-5: hsl($primary-hue, $primary-saturation, 5%);
$primary-10: hsl($primary-hue, $primary-saturation, 10%);
$primary-20: hsl($primary-hue, $primary-saturation, 20%);
$primary-30: hsl($primary-hue, $primary-saturation, 30%);
$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
$primary-40: hsl($primary-hue, $primary-saturation, 40%);
$primary-50: hsl($primary-hue, $primary-saturation, 50%);
$primary-60: hsl($primary-hue, $primary-saturation, 60%);
$primary-70: hsl($primary-hue, $primary-saturation, 70%);
$primary-80: hsl($primary-hue, $primary-saturation, 80%);
$primary-90: hsl($primary-hue, $primary-saturation, 90%);
$primary-93: hsl($primary-hue, $primary-saturation, 93%);
$primary-95: hsl($primary-hue, $primary-saturation, 95%);
$primary-97: hsl($primary-hue, $primary-saturation, 97%);

$primary-light-grey: hsl($primary-hue, 10%, 96%);
$primary-dark-grey: hsl($primary-hue, 10%, 10%);
$primary-light-gray: hsl($primary-hue, 10%, 96%);
$primary-dark-gray: hsl($primary-hue, 10%, 10%);

$secondary-hue: var(--secondary-hue);
$secondary-saturation: var(--secondary-saturation);
$secondary-light: var(--secondary-light);
$secondary-5: hsl($secondary-hue, $secondary-saturation, 5%);
$secondary-10: hsl($secondary-hue, $secondary-saturation, 10%);
$ac-secondary: hsl($secondary-hue, $secondary-saturation, $secondary-light);
$secondary-20: hsl($secondary-hue, $secondary-saturation, 20%);
$secondary-30: hsl($secondary-hue, $secondary-saturation, 30%);
$secondary-40: hsl($secondary-hue, $secondary-saturation, 40%);
$secondary-50: hsl($secondary-hue, $secondary-saturation, 50%);
$secondary-60: hsl($secondary-hue, $secondary-saturation, 60%);
$secondary-70: hsl($secondary-hue, $secondary-saturation, 70%);
$secondary-80: hsl($secondary-hue, $secondary-saturation, 80%);
$secondary-90: hsl($secondary-hue, $secondary-saturation, 90%);
$secondary-93: hsl($secondary-hue, $secondary-saturation, 93%);
$secondary-95: hsl($secondary-hue, $secondary-saturation, 95%);
$secondary-97: hsl($secondary-hue, $secondary-saturation, 97%);

$secondary-light-grey: hsl($secondary-hue, 10%, 96%);
$secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
$secondary-light-gray: hsl($secondary-hue, 10%, 96%);
$secondary-dark-gray: hsl($secondary-hue, 10%, 10%);

// tweak sidebar bg color. update value (--sidebar-light)

// green color guides
$green-hue: 141;
$green-saturation: 53%;
$green-5: hsl($green-hue, $green-saturation, 5%);
$green-10: hsl($green-hue, $green-saturation, 10%);
$green-20: hsl($green-hue, $green-saturation, 20%);
$green-30: hsl($green-hue, $green-saturation, 30%);
$green-40: hsl($green-hue, $green-saturation, 40%);
$success: hsl($green-hue, $green-saturation, 40%);
$green-50: hsl($green-hue, $green-saturation, 50%);
$green-60: hsl($green-hue, $green-saturation, 60%);
$green-70: hsl($green-hue, $green-saturation, 70%);
$green-80: hsl($green-hue, $green-saturation, 80%);
$green-90: hsl($green-hue, $green-saturation, 90%);
$green-93: hsl($green-hue, $green-saturation, 93%);
$green-95: hsl($green-hue, $green-saturation, 95%);
$green-97: hsl($green-hue, $green-saturation, 97%);

// blue color guides
$blue-hue: 217;
$blue-saturation: 71%;
$blue-5: hsl($blue-hue, $blue-saturation, 5%);
$blue-10: hsl($blue-hue, $blue-saturation, 10%);
$blue-20: hsl($blue-hue, $blue-saturation, 20%);
$blue-30: hsl($blue-hue, $blue-saturation, 30%);
$blue-40: hsl($blue-hue, $blue-saturation, 40%);
$blue-50: hsl($blue-hue, $blue-saturation, 50%);
$info: hsl($blue-hue, $blue-saturation, 50%);
$blue-60: hsl($blue-hue, $blue-saturation, 60%);
$blue-70: hsl($blue-hue, $blue-saturation, 70%);
$blue-80: hsl($blue-hue, $blue-saturation, 80%);
$blue-90: hsl($blue-hue, $blue-saturation, 90%);
$blue-93: hsl($blue-hue, $blue-saturation, 93%);
$blue-95: hsl($blue-hue, $blue-saturation, 95%);
$blue-97: hsl($blue-hue, $blue-saturation, 97%);

// purple color guides
$purple-hue: 286;
$purple-saturation: 66%;
$purple-5: hsl($purple-hue, $purple-saturation, 5%);
$purple-10: hsl($purple-hue, $purple-saturation, 10%);
$purple-20: hsl($purple-hue, $purple-saturation, 20%);
$purple-30: hsl($purple-hue, $purple-saturation, 30%);
$purple-40: hsl($purple-hue, $purple-saturation, 40%);
$purple: hsl($purple-hue, $purple-saturation, 40%);
$purple-50: hsl($purple-hue, $purple-saturation, 50%);
$purple-60: hsl($purple-hue, $purple-saturation, 60%);
$purple-70: hsl($purple-hue, $purple-saturation, 70%);
$purple-80: hsl($purple-hue, $purple-saturation, 80%);
$purple-90: hsl($purple-hue, $purple-saturation, 90%);
$purple-93: hsl($purple-hue, $purple-saturation, 93%);
$purple-95: hsl($purple-hue, $purple-saturation, 95%);
$purple-97: hsl($purple-hue, $purple-saturation, 97%);

// yellow color guides
$yellow-hue: 38;
$yellow-saturation: 93%;
$yellow-5: hsl($yellow-hue, $yellow-saturation, 5%);
$yellow-10: hsl($yellow-hue, $yellow-saturation, 10%);
$yellow-20: hsl($yellow-hue, $yellow-saturation, 20%);
$yellow-30: hsl($yellow-hue, $yellow-saturation, 30%);
$yellow-40: hsl($yellow-hue, $yellow-saturation, 40%);
$yellow-50: hsl($yellow-hue, $yellow-saturation, 50%);
$warning: hsl($yellow-hue, $yellow-saturation, 50%);
$yellow-60: hsl($yellow-hue, $yellow-saturation, 60%);
$yellow-70: hsl($yellow-hue, $yellow-saturation, 70%);
$yellow-80: hsl($yellow-hue, $yellow-saturation, 80%);
$yellow-90: hsl($yellow-hue, $yellow-saturation, 90%);
$yellow-93: hsl($yellow-hue, $yellow-saturation, 93%);
$yellow-95: hsl($yellow-hue, $yellow-saturation, 95%);
$yellow-97: hsl($yellow-hue, $yellow-saturation, 97%);

// red color guides
$red-hue: 348;
$red-saturation: 100%;
$red-5: hsl($red-hue, $red-saturation, 5%);
$red-10: hsl($red-hue, $red-saturation, 10%);
$red-20: hsl($red-hue, $red-saturation, 20%);
$red-30: hsl($red-hue, $red-saturation, 30%);
$danger: hsl($red-hue, $red-saturation, 40%);
$red-40: hsl($red-hue, $red-saturation, 40%);
$red-50: hsl($red-hue, $red-saturation, 50%);
$red-60: hsl($red-hue, $red-saturation, 60%);
$red-70: hsl($red-hue, $red-saturation, 70%);
$red-80: hsl($red-hue, $red-saturation, 80%);
$red-90: hsl($red-hue, $red-saturation, 90%);
$red-93: hsl($red-hue, $red-saturation, 93%);
$red-95: hsl($red-hue, $red-saturation, 95%);
$red-97: hsl($red-hue, $red-saturation, 97%);

// black color guides
$gray-hue: 0;
$gray-saturation: 0%;
$gray-5: hsl($gray-hue, $gray-saturation, 5%);
$gray-10: hsl($gray-hue, $gray-saturation, 10%);
$gray-20: hsl($gray-hue, $gray-saturation, 20%);
$gray-30: hsl($gray-hue, $gray-saturation, 30%);
$gray-40: hsl($gray-hue, $gray-saturation, 40%);
$gray-50: hsl($gray-hue, $gray-saturation, 50%);
$gray: hsl($gray-hue, $gray-saturation, 50%);
$gray-60: hsl($gray-hue, $gray-saturation, 60%);
$gray-70: hsl($gray-hue, $gray-saturation, 70%);
$gray-80: hsl($gray-hue, $gray-saturation, 80%);
$gray-90: hsl($gray-hue, $gray-saturation, 90%);
$gray-93: hsl($gray-hue, $gray-saturation, 93%);
$gray-95: hsl($gray-hue, $gray-saturation, 95%);
$gray-97: hsl($gray-hue, $gray-saturation, 97%);

// Slate color guides custom color
$slate-hue: 229;
$slate-saturation: 84%;
$slate-5: #020617;
$slate-10: #0f172a;
$slate-20: #1e293b;
$slate-30: #334155;
$slate-40: #475569;
$slate-50: #64748b;
$slate-60: #94a3b8;
$slate-70: #cbd5e1;
$slate-80: #e2e8f0;
$slate-90: #f1f5f9;
$slate-95: #f8fafc;

$color-text: $slate-30;
$color-heading: $slate-5;
$color-label: $slate-40;
$color-link: $slate-20;
$color-border-light: $slate-90;
$color-border: $slate-80;
$color-border-dark: $slate-70;

$color-sidebar: hsla($primary-hue, 10%, 5%);

// Box Shadow
$ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
$ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
$ac-shadow-3:
  0 3px 4px 0 rgba(0, 0, 0, 0.18),
  0 3px 3px -2px rgba(0, 0, 0, 0.16),
  0 1px 6px 0 rgba(0, 0, 0, 0.12);

$shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
$shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
$shadow-lg:
  0 3px 4px 0 rgba(0, 0, 0, 0.18),
  0 3px 3px -2px rgba(0, 0, 0, 0.16),
  0 1px 6px 0 rgba(0, 0, 0, 0.12);

// @import "../../theme/appscode";