:root {
  --jbs-heading_color: var(--jbs_heading_color_opt, #254035);
  --jbs-box_bg_color: var(--jbs_box_bg_color_opt, #EFF6F3);
  --jbs-brand_color_1: var(--jbs_brand_color_1_opt, #31795A);
  --jbs-brand_color_2: var(--jbs_brand_color_2_opt, #244034);
  --jbs-brand_color_3: var(--jbs_brand_color_3_opt, #D2F34C);
  --jbs-brand_color_4: var(--jbs_brand_color_4_opt, #00BF58);
  --jbs-brand_color_5: var(--jbs_brand_color_5_opt, #005025);
  --bs_sm: -1 1px 2px rgb(0 0 0 / 5%), 0 1px 4px rgb(0 0 0 / 5%), 0 2px 8px rgb(0 0 0 / 5%);
  --bs_md: -1 1px 3px rgb(0 0 0 / 6%), 0 2px 6px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 0 0 / 9%);
  --bs_lg: -1 1px 4px rgb(0 0 0 / 9%), 0 3px 8px rgb(0 0 0 / 9%), 0 4px 13px rgb(0 0 0 / 13%);

  // Border Colors
  --border_on_white: #e6edf0;
  --border_on_highlight: #e6edf0;

  --body_bg: #ffffff;
  --bs-white: #fff;
  --white_op20: rgba(255, 255, 255, 0.2);

  // Grayscale Palette
  --black_25: #f9f9f9;
  --black_50: #f2f2f2;
  --black_75: #eeeeee;
  --black_100: #d6d9dc;
  --black_150: #c8ccd0;
  --black_200: #bbc0c4;
  --black_300: #9fa6ad;
  --black_350: #9199a1;
  --black_400: #848d95;
  --black_500: #6a737c;
  --black_600: #535a60;
  --black_700: #3c4146;
  --black_750: #2f3337;
  --black_800: #242729;
  --black_900: #0c0d0e;
}

// SCSS Variables (for backward compatibility and SCSS compilation)
$heading-color: var(--jbs-heading_color);
$brand-color-1: var(--jbs-brand_color_1);
$brand-color-2: var(--jbs-brand_color_2);
$brand-color-3: var(--jbs-brand_color_3);
$brand-color-4: var(--jbs-brand_color_4);
$brand-color-5: var(--jbs-brand_color_5);
$brand-box-bg-color: var(--jbs-box_bg_color);

// Dashboard Color Variables (mapping to brand colors)
$head-color: $heading-color;
$color-one: $brand-color-1;
$color-two: $brand-color-2;
$color-three: $brand-color-3;
$color-four: $brand-color-4;
$color-five: $brand-color-5;

// Color Settings
$text-color: rgba(0,0,0,0.7);
$text-dark: #000;