Untitled

// CSS VARIABLES
:root {
    --Base-00-white: #FFFFFF;
    --Base-50-Offwhite: #FDFDFC;
    --Base-100: #F5F5F5;
    --Base-200: #E6E7E7;
    --Base-300: #D8D9D9;
    --Base-400: #BABEBE;
    --Base-500: #9DA3A2;
    --Base-600: #616C6B;
    --Base-700: #304241;
    --Base-800-black: #001918;

    --primary-brand-green-50: #FAFFFE;
    --primary-brand-green-100: #F0F9F7;
    --primary-brand-green-200: #E3F4F0;
    --primary-brand-green-300-mint: #B5E3D8;
    --primary-brand-green-400: #81CEC3;
    --primary-brand-green-500: #4ABFB4;
    --primary-brand-green-600-turquoise: #00AD9E;
    --primary-brand-green-700: #097C6F;
    --primary-brand-green-800-deep-green: #004ca5;

    --secondary-brand-yellow-50-blonde: #FFFFF6;
    --secondary-brand-yellow-100: #F9F6D3;
    --secondary-brand-yellow-200: #F2EEBA;
    --secondary-brand-yellow-300-yellow: #F0E991;
    --secondary-brand-yellow-400: #F0D860;
    --secondary-brand-yellow-500: #D9B02B;
 
    --tertiary-50: #F3EEF5;
    --tertiary-200: #A460BC;
    --tertiary-300-base: #683878;

    --warning-50: #FFFBEB;
    --warning-100: #FEE3AD;
    --warning-300-bright: #F09700;
    --warning-400-dark: #CC6600;

    --error-50: #FFF2F2;
    --error-100: #FECACA;
    --error-300-bright: #DA2121;
    --error-400-dark: #BF000D;

    --accent-1-Blue-50: #EAEFFE;
    --accent-1-Blue-200: #A7B9EB;
    --accent-1-Blue-300-base: #3460DC;

    --accent-2-Purple-50: #F4EAF8;
    --accent-2-Purple-200: #EOBAED;
    --accent-2-Purple-300-base: #BF43EA;

    --accent-3-Pink-50: #FFEDF4;
    --accent-3-Pink-200: #FFAEC6;
    --accent-3-pink-300-base:#EF5382;

    --accent-4-green-50: #EAF9E6;
    --accent-4-green-20: #BBDEB3;
    ---accent-4-green-300-base:#569E44;

    --accent-5-cyan-50: #E6FEFE;
    --accent-5-cyan-200: #A2DIE6;
    --accent-5-cyan-300-base: #OD99D9;

  // FOR BACKGROUND COLOR STORY
  --light_mode-bg-primary: #FDFDFC;
  --light_mode-bg-secondary: #F5F5F5;
  --light_mode-bg-tertiary: #E6E7E7;
  --light_mode-bg-disabled: #F5F5F5;
  --light_mode-bg-overlay: #00191833;
  --light_mode-bg-white: #FFFFFF;
  --light_mode-bg-black: #001918;
  --light_mode-bg-brand-primary: #097C6F;
  --light_mode-bg-brand-secondary: #00AD9E;
  --light_mode-bg-brand-tertiary: #4ABFB4;
  --light_mode-bg-brand-quaternary: #E3F4F0;
  --light_mode-bg-brand-quinary: #F0F9F7;
  --light_mode-bg-brand-senary: #FAFFFE;
  --light_mode-bg-yellow-primary: #F0D860;
  --light_mode-bg-yellow-secondary: #F0E991;
  --light_mode-bg-yellow-tertiary: #F9F6D3;
  --light_mode-bg-warning-primary: #FEE3AD;
  --light_mode-bg-warning-secondary: #FFFBEB;
  --light_mode-bg-error-primary: #FECACA;
  --light_mode-bg-error-secondary: #FFF2F2;
  --light_mode-bg-success-primary: #00AD9E;
  --light_mode-bg-success-secondary: #E3F4F0;
  --light_mode-bg-purple-primary: #683B78;
  --light_mode-bg-purple-secondary: #F3EEF5;

  // FOR ACCENT COLOR STORY
  --accent-1-blue-50: #EAEFFE;
  --accent-1-blue-200: #A7B9EB;
  --accent-1-blue-300: #3460DC;
  --accent-2-purple-0: #F4EAF8;
  --accent-2-purple-200: #E0BAED;
  --accent-2-purple-300: #BF43EA;
  --accent-3-pink-50: #FFEDF4;
  --accent-3-pink-200: #FFAEC6;
  --accent-3-pink-300: #EF5382;
  --accent-4-green-50: #EAF9E6;
  --accent-4-green-200: #BBDEB3;
  --accent-4-green-300: #569E44;
  --accent-5-light-blue-50: #E6FEFE;
  --accent-5-light-blue-200: #A2D1E6;
  --accent-5-light-blue-300: #0D99D9;

   //Border Colours
   --border-primary: #E6E7E7;
   --border-secondary:  #D8D9D9;
   --border-tertiary:  #9DA3A2;
   --border-quaternary:  #304241;
   --border-quinary:#001918;
   --border-brand-primary: #00AD9E;
   --border-brand-secondary: #097C6F;
   --border-hover-primary: #BABEBE66;
   --border-focus-primary: #097C6F;
   --border-focus-secondary: #FFFFFF;
   --border-error: #DA2121;
   --border-focus-error: #DA2121;
   --border-hover-error: #FECACA;
   --border-warning: #F09700;
   --border-success: #00AD9E;
   --border-disabled: #BABEBE; 


  //  FOREGROUND COLOURS
  --fg-primary: #001918;
  --fg-secondary: #304241;
  --fg-tertiary: #616C6B;
  --fg-white: #FFFFFF;
  --fg-disabled: #BABEBE;
  --fg-brand-primary: #097C6F;
  --fg-brand-secondary: #00AD9E;
  --fg-brand-secondary-hover: #097C6F;
  --fg-error: #DA2121;
  --fg-warning: #CC6600;
  --fg-brand-yellow: #F0D860;
  --fg-success: #00AD9E;
  --fg-purple: #EOBAED;
}

// CSS VARIABLES FOR DARK MODE
[data-theme="dark"] {
}

$body-bg-color: #f7f8f9;
$bg-white: #ffffff;
$white-color: #ffffff;
$black-bg-opacity-02: rgba(0, 0, 0, 0.2);
$bg-lignt-grey: #cccccc;
$border-lignt-grey: #cccccc;
$primary-green-clr: #097c6f;
$primary-green-light-clr: #f0f9f7;
$primary-green-brdr-clr: #118c7d;
$btn-disabled-clr: #b5e3d8;
$btn-hover-clr: #00a499;
$btn-focus-clr: #097c6f;
$btn-focus-outline-clr: #e2f4f0;
$grey-clr: #e7eaee;
$ttl-clr: #41504f;
$ttl-clr-2: #001918;
$black-clr: #000000;
$black-light: #1f3533;
$red-color: #dc2626;
$btn-primary-bg: #0083fd;
$plot-btn-clr-1: #e3f4f0;
$plot-btn-brdr-clr-1: #d8d9d9;
$plot-btn-txt-clr-1: #1f3533;
$plot-btn-clr-hover-1: #118c7d;
$amber-clr: #e08e04;
$amber-clr-2: #f59300;
$txt-black-light: rgba(0, 25, 24, 1);
$calander-btn-bg: #e3f4f0;
$prof-txt-clr: #004c45;
$user-badge-bg-clr-1: #e6e7e7;
$active-green-dot: #35be12;
$active-dormant-dot: #9da3a2;
$active-inactive-dot: #f59e0b;
$pale-yellow-bg: #f9f6d3;
$pagination-bg: #f5f5f5;
$page-hover-txt-clr: #616c6b;
$grey-clr-3: #babebe;
$clr-toba: #d9b02b;
$label-txt-xlr: #212529;
$error-txt-clr: #c00e0e;
$error-txt-clr-2: #ff1f1f;
$error-msg-strip-bg: #fee2e2;
$dark-border-clr: #111827;
$check-box-brdr: #d1d5db;
$check-box-checked-bg: #4b4efc;
$check-box-grey-bg: #d9d9d9;
$scroll-bar-thumb-bg: #c0c0c0;

$font-family-base: "tt_norms_proregular";
$font-family-base-medium: "tt_norms_promedium";
$font-family-base-bold: "tt_norms_probold";

$font-size-10: 10px;
$font-size-11: 11px;
$font-size-12: 12px;
$font-size-13: 13px;
$font-size-14: 14px;
$font-size-15: 15px;
$font-size-16: 16px;
$font-size-17: 17px;
$font-size-18: 18px;
$font-size-19: 19px;
$font-size-20: 20px;
$font-size-21: 21px;
$font-size-22: 22px;
$font-size-23: 23px;
$font-size-24: 24px;
$font-size-25: 25px;
$font-size-26: 26px;
$font-size-30: 30px;

$font-size-1em: 1em;

@mixin plot-btn-clr-1 {
  background: $plot-btn-clr-1;
  border: solid 1px $plot-btn-brdr-clr-1;
  color: $plot-btn-txt-clr-1;
  font-family: $font-family-base-medium;
  &:hover {
    background: $plot-btn-clr-hover-1;
    color: $white-color;
  }
}