:root {
  /* Font Size */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --fs-xs: 24px;
  --fs-sm: 30px;
  --fs-md: 36px;
  --fs-lg: 48px;
  --fs-xl: 60px;
  --fs-xxl: 72px;

  /* Radius */
  --radius-none: 0;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 100%;

  /* Base */
  --color-white: #fff;
  --color-black: #000;

  /* Brand */
  --brand-25: #fdfdfe;
  --brand-50: #f7f9ff;
  --brand-100: #edf2fe;
  --brand-200: #dfeaff;
  --brand-400: #bdd1ff;
  --brand-500: #a6bff9;
  --brand-600: #87a5ef;
  --brand-700: #3d63dd;
  --brand-800: #3657c3;
  --brand-900: #395bc7;
  --brand-950: #1d2e5c;

  /* Gray [light] */
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #182230;
  --gray-900: #101828;
  --gray-950: #0c111d;

  /* Gray [dark] */
  --dark-gray-25: #fafafa;
  --dark-gray-50: #f5f5f6;
  --dark-gray-100: #f0f1f1;
  --dark-gray-200: #ececed;
  --dark-gray-300: #cecfd2;
  --dark-gray-400: #94969c;
  --dark-gray-500: #85888e;
  --dark-gray-600: #61646c;
  --dark-gray-700: #333741;
  --dark-gray-800: #1f242f;
  --dark-gray-900: #161b26;
  --dark-gray-950: #0c111d;

  /* Gray [Blue] */
  --gray-blue-25: #fcfcfd;
  --gray-blue-50: #f8f9fc;
  --gray-blue-100: #eaecf5;
  --gray-blue-200: #d5d9eb;
  --gray-blue-300: #b3b8db;
  --gray-blue-400: #717bbc;
  --gray-blue-500: #4e5ba6;
  --gray-blue-600: #3e4784;
  --gray-blue-700: #363f72;
  --gray-blue-800: #293056;
  --gray-blue-900: #101323;
  --gray-blue-950: #0d0f1c;

  /* Indigo */
  --indigo-25: #f5f8ff;
  --indigo-50: #eef4ff;
  --indigo-100: #e0eaff;
  --indigo-200: #c7d7fe;
  --indigo-300: #717bbc;
  --indigo-400: #4e5ba6;
  --indigo-500: #6172f3;
  --indigo-600: #444ce7;
  --indigo-700: #3538cd;
  --indigo-800: #2d31a6;
  --indigo-900: #2d3282;
  --indigo-950: #1f235b;

  /* Blue [dark] */
  --blue-dark-25: #f5f8ff;
  --blue-dark-50: #eff4ff;
  --blue-dark-100: #d1e0ff;
  --blue-dark-200: #b2ccff;
  --blue-dark-300: #84adff;
  --blue-dark-400: #528bff;
  --blue-dark-500: #2970ff;
  --blue-dark-600: #155eef;
  --blue-dark-700: #004eeb;
  --blue-dark-800: #0040c1;
  --blue-dark-900: #00359e;
  --blue-dark-950: #002266;

  /* Success */
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #dcfae6;
  --success-200: #abefc6;
  --success-300: #75e0a7;
  --success-400: #47cd89;
  --success-500: #17b26a;
  --success-600: #17b26a;
  --success-700: #067647;
  --success-800: #085d3a;
  --success-900: #074d31;
  --success-950: #053321;

  /* Warning */
  --warning-25: #fffcf5;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --warning-950: #4e1d09;

  /* Error */
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --error-950: #55160c;
}

.badge_blue {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 9999px;
  background-color: var(--indigo-50);
  border: 1px solid var(--indigo-200);
  font-size: var(--text-xs);
  color: var(--indigo-700);
  font-weight: 500;
  width: fit-content;
}

.badge_green {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 9999px;
  background-color: var(--success-100);
  border: 1px solid var(--success-200);
  font-size: var(--text-xs);
  color: var(--success-800);
  font-weight: 500;
  width: fit-content;
}

.gray_blue_green {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 9999px;
  background-color: var(--color-white);
  border: 1px solid var(--gray-blue-200);
  font-size: var(--text-xs);
  color: var(--gray-blue-700);
  font-weight: 500;
  width: fit-content;
}