:root, [data-color-theme=light],
html[data-color-theme=light] [data-color-theme] {
  color-scheme: light;
  --component-active-bg: #0c83ff;
  --component-active-bg-rgb: 12, 131, 255;
  --component-active-color: #fff;
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0.25);
  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
  --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
  --gray-100: #F9FAFB;
  --gray-200: #F3F4F6;
  --gray-300: #E5E7EB;
  --gray-400: #D1D5DB;
  --gray-500: #9CA3AF;
  --gray-600: #6B7280;
  --gray-700: #4B5563;
  --gray-800: #374151;
  --gray-900: #1F2937;
  --indigo: #5C6BC0;
  --purple: #8e70c1;
  --pink: #f35c86;
  --teal: #39d9d3 /*#26A69A*/;
  --yellow: #fdf371 /*#ffd648*/;
  --primary: #0cafbc /*#0c83ff*/;
  --secondary: #023c5e /*#247297*/;
  --tertiary: #9fe9f0;
  --navbar: #028c9e;
  --success: #00dd53 /*#059669*/;
  --info: #049aad;
  --warning: #f58646;
  --danger: #ea4900 /*#EF4444*/;
  --light: #F3F4F6;
  --dark: #00304c /*#252b36*/;
  --black: #000;
  --white: #fff;
  --component-active-bg: var(--primary);
  --card-elements: #f9fbfc;
  --indigo-rgb: 92, 107, 192;
  --purple-rgb: 142, 112, 193;
  --pink-rgb: 243, 92, 134;
  --teal-rgb: 57, 217, 211 /*38, 166, 154*/;
  --yellow-rgb: 253, 243, 113 /*255, 214, 72*/;
  --primary-rgb: 12, 175, 188 /*12, 131, 255*/;
  --secondary-rgb: 2, 60, 94 /*36, 114, 151*/;
  --tertiary-rgb: 159, 233, 240;
  --navbar-rgb: 2, 140, 158;
  --success-rgb: 0, 221, 83 /*5, 150, 105*/;
  --info-rgb: 4, 154, 173;
  --warning-rgb: 245, 134, 70;
  --danger-rgb: 234, 73, 0 /*239, 68, 68*/;
  --light-rgb: 243, 244, 246;
  --dark-rgb: 0, 48, 76 /*37, 43, 54*/;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --card-elements-rgb: 249, 251, 252;
  --body-color-rgb: 31, 41, 55;
  --body-bg-rgb: 241, 244, 249;
  --body-color: #1F2937;
  --body-bg: #f1f4f9;
  --border-color: #D1D5DB;
  --border-color-translucent: rgba(0, 0, 0, 0.125);
  --link-color: #0c83ff;
  --link-hover-color: #0962bf;
  --code-color: #f35c86;
  --highlight-bg: rgba(0, 0, 0, 0.15);
}
[data-color-theme=dark],
html[data-color-theme=dark] [data-color-theme] {
  color-scheme: dark;
  --gray-100: #39393d;
  --gray-200: #3f4044;
  --gray-300: #46474a;
  --gray-400: #4d4d51;
  --gray-500: #6e6f71;
  --gray-600: #909092;
  --gray-700: #b1b1b3;
  --gray-800: #d2d3d3;
  --gray-900: #f4f4f4;
  --dark: #08090a;
  --dark-rgb: 8, 9, 10;
  --light: #383940;
  --light-rgb: 56, 57, 64;
  --body-bg: #202125;
  --body-color: #fff;
  --body-color-rgb: 255, 255, 255;
  --border-color: #4d4d51;
  --border-color-translucent: rgba(255, 255, 255, 0.125);
  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  --link-color: #6db5ff;
  --link-rgb-color: 109, 181, 255;
  --link-hover-color: #a0cfff;
  --highlight-bg: rgba(255, 255, 255, 0.3);
  --code-color: #f57d9e;
}

.btn-danger {
  --btn-color: #fff;
  --btn-bg: var(--danger);
  --btn-border-color: var(--danger);
  --btn-hover-color: #fff;
  --btn-hover-bg: #d94500;
  --btn-hover-border-color: #d94500;
  --btn-focus-shadow-rgb: 241, 96, 96;
  --btn-active-color: #fff;
  --btn-active-bg: #c63f00;
  --btn-active-border-color: #c63f00;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: var(--danger);
  --btn-disabled-border-color: var(--danger);
}
/*
.btn-success {
  --btn-color: #fff;
  --btn-bg: var(--success);
  --btn-border-color: var(--success);
  --btn-hover-color: #fff;
  --btn-hover-bg: #02ce50;
  --btn-hover-border-color: #02ce50;
  --btn-focus-shadow-rgb: 241, 96, 96;
  --btn-active-color: #fff;
  --btn-active-bg: #02ce50;
  --btn-active-border-color: #02ce50;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: var(--success);
  --btn-disabled-border-color: var(--success);
}*/
.btn-success {
  --btn-color: #fff;
  --btn-bg: var(--success);
  --btn-border-color: var(--success);
  --btn-hover-color: #fff;
  --btn-hover-bg: #02ce50;
  --btn-hover-border-color: #02ce50;
  --btn-focus-shadow-rgb: 241, 96, 96;
  --btn-active-color: #fff;
  --btn-active-bg: #02be4b;
  --btn-active-border-color: #02ce50;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: var(--success);
  --btn-disabled-border-color: var(--success);
}