:root {
  --primary-darker: rgb(0, 82, 72);
  --primary-dark:rgb(0, 123, 85);
  --primary-main:rgb(0, 171, 85);
  --primary-light:rgb(91, 229, 132);
  --primary-lighter:rgb(200, 250, 205);

  --blue-dark:rgb(10, 22, 50);

  --transparent-primary-badge: rgba(0, 171, 86, 16%);

  --primary-error: rgb(255, 72, 66);
  --primary-error-light:#FFE7D9;
  --transparent-primary-error-16: rgba(255, 72, 66, 16%);

  --primary-success: #54D62C;
  --primary-success-light: #E9FCD4;
  --transparent-primary-success-16: rgba(84, 214, 44, 16%);

  --primary-info:#1890FF;
  --primary-info-light: #D0F2FF;
  --transparent-primary-info-16:rgba(24, 143, 255, 16%);

  
  --primary-warning:#FFC107;
  --transparent-primary-warning-16:rgba(255, 193, 7, 16%);
  --primary-main-warning:rgb(183, 129, 3);


  --transparent-primary-48:rgb(0, 171, 85, 48%);
  --transparent-primary-32:rgb(0, 171, 85, 32%);
  --transparent-primary-24:rgb(0, 171, 85, 24%);
  --transparent-primary-16:rgb(0, 171, 85, 16%);
  --transparent-primary-12:rgb(0, 171, 85, 12%);
  --transparent-primary-12:rgb(0, 171, 85, 12%);
  --transparent-primary-8:rgb(0, 171, 85, 8%);

  --gray-900: rgb(22, 28, 36);
  --gray-800: rgb(33, 43, 54);
  --gray-700: rgb(69, 79, 91);
  --gray-600: rgb(99, 115, 129);
  --gray-500: rgb(145, 158, 171);
  --gray-400: rgb(196, 205, 213);
  --gray-300: rgb(223, 227, 232);
  --gray-200: rgb(244, 246, 248);
  --gray-100: rgb(249, 250, 251);

  --transparent-gray-48:rgb(145, 158, 171, 48%) ;
  --transparent-gray-32:rgb(145, 158, 171, 32%) ;
  --transparent-gray-24:rgb(145, 158, 171, 24%) ;
  --transparent-gray-20:rgb(145, 158, 171, 20%) ;
  --transparent-gray-16:rgb(145, 158, 171, 16%) ;
  --transparent-gray-12:rgb(145, 158, 171, 12%) ;
  --transparent-gray-8:rgb(145, 158, 171, 8%) ;

  --text-light-mode-primary:rgb(45, 45, 45);
  --text-light-mode-secondary:rgb(99, 115, 129);
  --text-light-mode-disabled:rgb(145, 158, 171);

  --divider-light-mode-40: rgba(176, 176, 176, 40%);
  --divider-light-mode-24: rgba(176, 176, 176, 24%);

  
  --text-dark-mode-primary:rgb(255, 255, 255);
  --text-dark-mode-secondary: rgb(145, 158, 171);
  --text-dark-mode-disabled: rgb(99, 115, 129);

  --white-common:rgb(255,255,255);
  --white-common-48:rgba(255, 255, 255, 48%);
  --white-common-32:rgba(255, 255, 255, 32%);
  --white-common-24:rgba(255, 255, 255, 24%);
  --white-common-16:rgba(255, 255, 255, 16%);
  --white-common-12:rgba(255, 255, 255, 12%);
  --white-common-8:rgba(255, 255, 255, 8%);

  --black-common: rgb(0, 0, 0);
  --black-common-48: rgba(0, 0, 0, 48%);
  --black-common-32: rgba(0, 0, 0, 32%);
  --black-common-24: rgba(0, 0, 0, 24%);
  --black-common-16: rgba(0, 0, 0, 16%);
  --black-common-16: rgba(0, 0, 0, 48%);
  --black-common-12: rgba(0, 0, 0, 12%);
  --black-common-8: rgba(0, 0, 0, 8%);

  --background-light-01-default: rgb(255, 255, 255);
  --background-light-mode-paper: rgb(255, 255, 255);
  --background-light-mode-neutral: rgb(244, 246, 248);

  --background-dark-mode: rgb(0, 0, 0);
  --background-dark-mode-paper: rgb(33, 43, 54);
  --background-dark-mode-neutral: rgba(145, 158, 171, 16%);

  --action-light-primary-01: #00AB55; 
  --action-light-primary-02-hover: rgba(0, 171, 86, 8%);
  --action-light-primary-02-selected: #00AB55;


}

/* ---- Default Light Mode ----*/

.light-mode {
  --primary-dark-light:var(--primary-dark);
  --primary-main-light:var(--primary-main);

  --background-01-default:#ffffff;
  --text-02-secondary:rgb(99, 115, 129);
  --text-common-dark-light-mode:rgb(45, 45, 45);

  --text-header-search-input:var( --text-light-mode-primary);
  --search-dropdown-thumb:var(--gray-300);


  --transparent-primary-48:rgb(0, 171, 85, 48%);
  --transparent-primary-32:rgb(0, 171, 85, 32%);
  --transparent-primary-24:rgb(0, 171, 85, 24%);
  --transparent-primary-16:rgb(0, 171, 85, 16%);
  --transparent-primary-12:rgb(0, 171, 85, 12%);
  --transparent-primary-12:rgb(0, 171, 85, 12%);
  --transparent-primary-light-8-dark-32:rgb(0, 171, 85, 8%);

  /* Hover */

  
}

/* ---- Dark Mode ----*/

.dark-mode {
  --primary-dark-light:var(--primary-light);
  --primary-main-light:var(--primary-light);
  --background-01-default:#161C24;
  --text-02-secondary:rgb(145, 158, 171);
  --text-common-dark-light-mode:rgb(255, 255, 255);
  --text-header-search-input:var( --gray-600);
  --search-dropdown-thumb:var(--transparent-primary-16);
  --transparent-primary-light-8-dark-32:rgb(0, 171, 85, 32%);
}