:root {
  /* Start Color Scale */

  --secondary-50: 241 250 253;
  --secondary-100: 225 246 253;
  --secondary-200: 209 240 250;
  --secondary-300: 190 231 245;
  --secondary-400: 169 218 237;
  --secondary-500: 141 202 227;
  --secondary-600: 96 179 215;
  --secondary-700: 124 226 254;
  --secondary-800: 116 218 248;
  --secondary-900: 0 116 158;
  --secondary-950: 29 62 86;

  --neutral-50: 252 252 253;
  --neutral-100: 249 249 251;
  --neutral-200: 239 240 243;
  --neutral-300: 231 232 236;
  --neutral-400: 224 225 230;
  --neutral-500: 205 206 215;
  --neutral-600: 185 187 198;
  --neutral-700: 139 141 152;
  --neutral-800: 128 130 141;
  --neutral-900: 98 99 108;
  --neutral-950: 30 31 36;

  --info-50: 235 241 255;
  --info-100: 213 226 255;
  --info-200: 192 213 255;
  --info-300: 151 186 255;
  --info-400: 104 149 255;
  --info-500: 51 92 255;
  --info-600: 53 89 233;
  --info-700: 37 71 208;
  --info-800: 31 59 173;
  --info-900: 24 47 139;
  --info-950: 18 35 104;

  --error-50: 255 235 236;
  --error-100: 255 213 216;
  --error-200: 255 192 197;
  --error-300: 255 151 160;
  --error-400: 255 104 117;
  --error-500: 251 55 72;
  --error-600: 233 53 68;
  --error-700: 208 37 51;
  --error-800: 173 31 43;
  --error-900: 139 24 34;
  --error-950: 104 18 25;

  --success-50: 224 250 236;
  --success-100: 208 251 233;
  --success-200: 194 245 218;
  --success-300: 132 235 180;
  --success-400: 62 224 137;
  --success-500: 31 193 107;
  --success-600: 29 175 97;
  --success-700: 23 140 78;
  --success-800: 26 117 68;
  --success-900: 22 100 59;
  --success-950: 11 70 39;

  --warning-50: 255 250 235;
  --warning-100: 255 239 204;
  --warning-200: 255 236 192;
  --warning-300: 255 224 151;
  --warning-400: 255 210 104;
  --warning-500: 246 181 30;
  --warning-600: 230 168 25;
  --warning-700: 201 154 44;
  --warning-800: 167 128 37;
  --warning-900: 134 102 29;
  --warning-950: 98 76 24;

  /* End Color Scale */

  --black: 30 31 36;
  --white: 255 255 255;

  --accent-gradient: linear-gradient(
    90deg,
    #2c27db 0%,
    #58c5f8 50%,
    #fbb7f1 100%
  );

  --accent-gradient-2: linear-gradient(
    90deg,
    #3328a4 0%,
    #674ffc 50%,
    #fc9ba0 100%
  );

  --accent-gradient-3: linear-gradient(
    90deg,
    #ff3c40 0%,
    #fb9164 50%,
    #c4aaf2 100%
  );
  --accent-surface: linear-gradient(
    269.77deg,
    rgba(255, 60, 64, 0.3) -3.21%,
    rgba(251, 145, 100, 0.3) 38.77%,
    rgba(196, 170, 242, 0.3) 80.75%
  );

  --button-accent: linear-gradient(
    62.92deg,
    #1e1955 25%,
    #2416b2 48%,
    #5641e4 76%,
    #ef94a7 96%
  );

  --button-accent-2: linear-gradient(
    62.92deg,
    #1e1955 25%,
    #2416b2 48%,
    #5641e4 76%,
    #ef94a7 96%
  );

  --button-accent-3: linear-gradient(
    62.92deg,
    #ff3c40 48%,
    #fb9164 76%,
    #c4aaf2 96%
  );

  --card-bg-gradient-1: linear-gradient(
    34deg,
    rgba(229, 185, 242, 0) 61.86%,
    rgba(243, 150, 166, 0.2) 76.8%,
    rgba(98, 76, 244, 0.2) 96.31%,
    rgba(46, 45, 220, 0.2) 113.03%
  );

  --card-bg-gradient-2: linear-gradient(
    34deg,
    rgba(229, 185, 242, 0) 61.86%,
    rgba(229, 185, 242, 0.2) 76.8%,
    rgba(73, 144, 238, 0.2) 96.31%,
    rgba(46, 45, 220, 0.2) 113.03%
  );

  --card-bg-gradient-3: linear-gradient(
    34deg,
    rgba(199, 168, 233, 0) 61.86%,
    rgba(202, 168, 228, 0.2) 76.8%,
    rgba(252, 129, 93, 0.2) 96.31%,
    rgba(255, 63, 65, 0.2) 113.03%
  );

  --secondary-darker-5: 29 62 86;
  --secondary-darker-4: 0 116 158;
  --secondary-darker-3: 116 218 248;
  --secondary-darker-2: 124 226 254;
  --secondary-darker-1: 96 179 215;
  --secondary: 141 202 227;
  --secondary-lighter-1: 169 218 237;
  --secondary-lighter-2: 190 231 245;
  --secondary-lighter-3: 209 240 250;
  --secondary-lighter-4: 225 246 253;
  --secondary-lighter-5: 241 250 253;

  --neutral-darker-5: 30 31 36;
  --neutral-darker-4: 98 99 108;
  --neutral-darker-3_5: 20 20 21;
  --neutral-darker-3: 128 130 141;
  --neutral-darker-2: 139 141 152;
  --neutral-darker-1: 185 187 198;
  --neutral: 205 206 215;
  --neutral-lighter-1: 224 225 230;
  --neutral-lighter-2: 231 232 236;
  --neutral-lighter-3: 239 240 243;
  --neutral-lighter-4: 249 249 251;
  --neutral-lighter-5: 252 252 253;

  --info-darker-5: 18 35 104;
  --info-darker-4: 24 47 139;
  --info-darker-3: 31 59 173;
  --info-darker-2: 37 71 208;
  --info-darker-1: 53 89 233;
  --info: 51 92 255;
  --info-lighter-1: 104 149 255;
  --info-lighter-2: 151 186 255;
  --info-lighter-3: 192 213 255;
  --info-lighter-4: 213 226 255;
  --info-lighter-5: 235 241 255;

  --error-darker-5: 104 18 25;
  --error-darker-4: 139 24 34;
  --error-darker-3: 173 31 43;
  --error-darker-2: 208 37 51;
  --error-darker-1: 233 53 68;
  --error: 251 55 72;
  --error-lighter-1: 255 104 117;
  --error-lighter-2: 255 151 160;
  --error-lighter-3: 255 192 197;
  --error-lighter-4: 255 213 216;
  --error-lighter-5: 255 235 236;

  --success-darker-5: 11 70 39;
  --success-darker-4: 22 100 59;
  --success-darker-3: 26 117 68;
  --success-darker-2: 23 140 78;
  --success-darker-1: 29 175 97;
  --success: 31 193 107;
  --success-lighter-1: 62 224 137;
  --success-lighter-2: 132 235 180;
  --success-lighter-3: 194 245 218;
  --success-lighter-4: 208 251 233;
  --success-lighter-5: 224 250 236;

  --warning-darker-5: 98 76 24;
  --warning-darker-4: 167 128 37;
  --warning-darker-3: 167 128 37;
  --warning-darker-2: 201 154 44;
  --warning-darker-1: 230 168 25;
  --warning: 246 181 30;
  --warning-lighter-1: 255 210 104;
  --warning-lighter-2: 255 224 151;
  --warning-lighter-3: 255 236 192;
  --warning-lighter-4: 255 252 204;
  --warning-lighter-5: 255 250 235;

  /*Start Dark Color */

  --dark-black: 8 8 8;
  --dark-white: 238 238 240;

  --dark-accent-gradient: linear-gradient(
    63deg,
    #ebcbcb 0%,
    #f69193 31.39%,
    #b0b0ec 83.13%
  );

  --dark-accent-surface: rgba(96, 100, 108, 0.1);

  --dark-button-accent: linear-gradient(
    63deg,
    rgba(235, 203, 203, 0.12) -23.56%,
    rgba(246, 145, 147, 0.12) 31.39%,
    rgba(176, 176, 236, 0.12) 83.13%
  );

  --dark-secondary-darker-5: 13 20 31;
  --dark-secondary-darker-4: 17 26 39;
  --dark-secondary-darker-3: 17 40 64;
  --dark-secondary-darker-2: 17 53 85;
  --dark-secondary-darker-1: 21 68 103;
  --dark-secondary: 27 83 123;
  --dark-secondary-lighter-1: 31 102 146;
  --dark-secondary-lighter-2: 25 124 174;
  --dark-secondary-lighter-3: 124 226 254;
  --dark-secondary-lighter-4: 168 238 255;
  --dark-secondary-lighter-5: 194 243 255;

  --dark-neutral-darker-5: 8 8 8;
  --dark-neutral-darker-4: 13 13 13;
  --dark-neutral-darker-3: 33 34 37;
  --dark-neutral-darker-2: 40 41 45;
  --dark-neutral-darker-1: 48 49 54;
  --dark-neutral: 57 58 64;
  --dark-neutral-lighter-1: 70 72 79;
  --dark-neutral-lighter-2: 94 96 106;
  --dark-neutral-lighter-3: 108 110 121;
  --dark-neutral-lighter-4: 121 123 134;
  --dark-neutral-lighter-5: 178 179 189;

  --dark-info-darker-5: 4 8 19;
  --dark-info-darker-4: 15 21 37;
  --dark-info-darker-3: 20 35 75;
  --dark-info-darker-2: 25 45 102;
  --dark-info-darker-1: 33 55 122;
  --dark-info: 26 53 190;
  --dark-info-lighter-1: 42 66 138;
  --dark-info-lighter-2: 51 79 159;
  --dark-info-lighter-3: 59 92 186;
  --dark-info-lighter-4: 37 71 208;
  --dark-info-lighter-5: 143 179 255;

  --dark-error-darker-5: 15 6 5;
  --dark-error-darker-4: 33 16 15;
  --dark-error-darker-3: 66 6 10;
  --dark-error-darker-2: 92 0 3;
  --dark-error-darker-1: 111 0 8;
  --dark-error: 192 6 37;
  --dark-error-lighter-1: 130 0 21;
  --dark-error-lighter-2: 158 22 35;
  --dark-error-lighter-3: 203 31 47;
  --dark-error-lighter-4: 208 37 51;
  --dark-error-lighter-5: 255 143 138;

  --dark-success-darker-5: 4 10 5;
  --dark-success-darker-4: 15 26 18;
  --dark-success-darker-3: 13 45 25;
  --dark-success-darker-2: 1 61 29;
  --dark-success-darker-1: 0 76 38;
  --dark-success: 0 126 65;
  --dark-success-lighter-1: 4 91 47;
  --dark-success-lighter-2: 4 108 57;
  --dark-success-lighter-3: 0 129 67;
  --dark-success-lighter-4: 23 140 78;
  --dark-success-lighter-5: 105 208 142;

  --dark-warning-darker-5: 10 8 5;
  --dark-warning-darker-4: 26 23 17;
  --dark-warning-darker-3: 39 39 20;
  --dark-warning-darker-2: 52 41 19;
  --dark-warning-darker-1: 64 50 21;
  --dark-warning: 189 143 26;
  --dark-warning-lighter-1: 78 61 25;
  --dark-warning-lighter-2: 98 77 30;
  --dark-warning-lighter-3: 127 98 33;
  --dark-warning-lighter-4: 201 154 44;
  --dark-warning-lighter-5: 223 183 102;
  /*End Dark Color */

  --alert-success-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(208, 251, 233, 0.5) 0%,
      rgba(208, 251, 233, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(208, 251, 233, 0.5) 0%,
      rgba(208, 251, 233, 0) 100%
    ),
    linear-gradient(0deg, rgb(var(--white)), rgb(var(--white)));

  --alert-info-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(59, 92, 186, 0.3) 0%,
      rgba(59, 92, 186, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(59, 92, 186, 0.3) 0%,
      rgba(59, 92, 186, 0) 100%
    ),
    linear-gradient(0deg, rgb(var(--white)), rgb(var(--white)));

  --alert-warning-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(223, 183, 102, 0.3) 0%,
      rgba(223, 183, 102, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(223, 183, 102, 0.3) 0%,
      rgba(223, 183, 102, 0) 100%
    ),
    linear-gradient(0deg, rgb(var(--white)), rgb(var(--white)));

  --alert-error-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(139, 24, 34, 0.2) 0%,
      rgba(139, 24, 34, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(139, 24, 34, 0.2) 0%,
      rgba(139, 24, 34, 0) 100%
    ),
    linear-gradient(0deg, rgb(var(--white)), rgb(var(--white)));

  --light-ring: 137 144 168;

  --page-background: var(--neutral-lighter-4);
  --navigation-bg: var(--white);
  --sidebar-item: var(--neutral-lighter-3);
  --button-primary-default: var(--dark-neutral-darker-5);
  --button-primary-hover: var(--dark-neutral-darker-5);
  --button-secondary-default: var(--dark-neutral-darker-5);
  --button-secondary-hover: var(--dark-neutral-darker-5);
  --error-default: var(--error-darker-1);
  --error-hover: var(--error-darker-3);
  --progress-bar: var(--neutral);
  --on-progress-bar: var(--neutral-darker-3);

  --text-primary: var(--neutral-darker-5);
  --text-secondary: var(--neutral-darker-2);
  --text-placeholder: var(--neutral-darker-3);
  --text-disabled: var(--neutral-darker-3);
  --text-error: var(--error-darker-3);
  --text-primary-button: var(--white);
  --text-secondary-button: var(--white);
  --text-sidebar: var(--neutral-darker-5);

  --link-primary-default: var(--dark-neutral-darker-4);
  --link-primary-hover: var(--dark-neutral-darker-5);
  --link-disabled: var(--neutral-darker-3);
  --link-secondary-default: var(--info-darker-3);
  --link-secondary-hover: var(--info-darker-4);
  --link-error-default: var(--error-darker-3);
  --link-error-hover: var(--error-darker-4);

  --border-card-default: var(--neutral-lighter-1);
  --border-card-hover: var(--neutral-darker-1);
  --border-button: var(--neutral-darker-3);
  --border-button-white: var(--dark-neutral-darker-4);
  --border-field-default: var(--neutral-lighter-2);

  --surface-primary: 205 206 215 / 15%;
  --surface-hover: 205 206 215 / 25%;
  --surface-disabled: var(--neutral-lighter-1);
  --surface-field: var(--neutral-lighter-2);
  --surface-white: var(--dark-neutral-darker-4);

  --red-background: 173 31 43 / 16%;
  --red-text: var(--error-darker-4);

  --green-background: 26 117 68 / 10%;
  --green-text: var(--success-darker-5);

  --blue-background: 31 59 173 / 16%;
  --blue-text: var(--info-darker-4);
  --blue-background-solid: var(--info-darker-3);

  --yellow-background: 167 128 37 / 10%;
  --yellow-text: var(--warning-darker-5);

  --neutral-background: 98 99 108 / 26%;
  --neutral-text: var(--neutral-darker-5);

  --sky-blue-background: var(--secondary-darker-2);
  --sky-blue-text: var(--dark-neutral-darker-5);
  --sky-blue-checked: var(--dark-secondary-lighter-3);
  --sky-blue-checked-high-contrast: var(--dark-secondary-lighter-2);
  --checked: var(--secondary-lighter-3);

  --loading-1: var(--secondary-darker-5);
  --loading-2: var(--secondary-darker-4);
  --loading-3: var(--secondary-darker-3);
  --loading-4: var(--secondary-darker-2);
  --loading-5: var(--secondary-darker-1);
  --loading-6: var(--secondary);

  /* active menu */
  --active-menu: radial-gradient(
    49.48% 50.59% at 100% 50%,
    #000 10%,
    rgba(0, 0, 0, 0) 90.2%
  );

  /* Start shadcn css variable */
  --background: var(--page-background);
  --foreground: 2 8 23;
  --card-bg: 255 255 255;
  --card-bg-foreground: var(--neutral-darker-3_5);
  --sidebar-bg: var(--white);
  --sidebar-bg-foreground: var(--neutral-darker-3_5);
  --popover: 255 255 255;
  --popover-foreground: 2 8 23;
  --primary: 15 23 42;
  --primary-foreground: 248 250 252;
  --secondary-foreground: var(--text-secondary);
  --muted: 241 245 249;
  --muted-foreground: 100 116 139;
  --accent: var(--accent-gradient);
  --accent-foreground: var(--blue-text);
  --accent-2: var(--accent-gradient-2);
  --accent-2-foreground: var(--blue-text);
  --accent-3: var(--accent-gradient-3);
  --accent-3-foreground: var(--blue-text);
  --success-foreground: var(--green-text);
  --destructive: var(--red-background);
  --destructive-foreground: var(--red-text);
  --border: 226 232 240;
  --input: 226 232 240;
  --ring: var(--light-ring);
  --chart-1: 231 110 80;
  --chart-2: 42 157 144;
  --chart-3: 39 71 84;
  --chart-4: 232 196 104;
  --chart-5: 244 164 98;
  --radius: 0.5rem;
  --sidebar-bg: 255 255 255;
  /* End shadcn css variable */
}

.dark {
  /* Start Color Scale */

  --secondary-50: 13 20 31;
  --secondary-100: 17 26 39;
  --secondary-200: 17 40 64;
  --secondary-300: 17 53 85;
  --secondary-400: 21 68 103;
  --secondary-500: 27 83 123;
  --secondary-600: 31 102 146;
  --secondary-700: 25 124 174;
  --secondary-800: 124 226 254;
  --secondary-900: 168 238 255;
  --secondary-950: 194 243 255;

  --neutral-50: 8 8 8;
  --neutral-100: 13 13 13;
  --neutral-200: 33 34 37;
  --neutral-300: 40 41 45;
  --neutral-400: 48 49 54;
  --neutral-500: 57 58 64;
  --neutral-600: 70 72 79;
  --neutral-700: 94 96 106;
  --neutral-800: 108 110 121;
  --neutral-900: 121 123 134;
  --neutral-950: 178 179 189;

  --info-50: 4 8 19;
  --info-100: 15 21 37;
  --info-200: 20 35 75;
  --info-300: 25 45 102;
  --info-400: 33 55 122;
  --info-500: 42 66 138;
  --info-600: 51 79 159;
  --info-700: 59 92 186;
  --info-800: 37 71 208;
  --info-900: 26 53 190;
  --info-950: 143 179 255;

  --error-50: 15 6 5;
  --error-100: 33 16 15;
  --error-200: 66 6 10;
  --error-300: 92 0 3;
  --error-400: 111 0 8;
  --error-500: 130 0 21;
  --error-600: 158 22 35;
  --error-700: 203 31 47;
  --error-800: 208 37 51;
  --error-900: 192 6 37;
  --error-950: 255 143 138;

  --success-50: 4 10 5;
  --success-100: 15 26 18;
  --success-200: 13 45 25;
  --success-300: 1 61 29;
  --success-400: 0 76 38;
  --success-500: 4 91 47;
  --success-600: 4 108 57;
  --success-700: 0 129 67;
  --success-800: 23 140 78;
  --success-900: 0 126 65;
  --success-950: 105 208 142;

  --warning-50: 10 8 5;
  --warning-100: 26 23 17;
  --warning-200: 39 33 20;
  --warning-300: 52 41 19;
  --warning-400: 64 50 21;
  --warning-500: 78 61 25;
  --warning-600: 98 77 30;
  --warning-700: 127 98 33;
  --warning-800: 201 154 44;
  --warning-900: 189 143 26;
  --warning-950: 223 183 102;

  /* End Color Scale */

  /* primary token */
  --black: 8 8 8;
  --white: 238 238 240;

  --accent-gradient: linear-gradient(
    90deg,
    #2c27db 0%,
    #58c5f8 50%,
    #fbb7f1 100%
  );

  --accent-gradient-2: linear-gradient(
    90deg,
    #3328a4 0%,
    #674ffc 50%,
    #fc9ba0 100%
  );

  --accent-gradient-3: linear-gradient(
    90deg,
    #ff3c40 0%,
    #fb9164 50%,
    #c4aaf2 100%
  );

  --accent-surface: linear-gradient(
    269.77deg,
    rgba(255, 60, 64, 0.3) -3.21%,
    rgba(251, 145, 100, 0.3) 38.77%,
    rgba(196, 170, 242, 0.3) 80.75%
  );

  /* --button-accent: linear-gradient(
    63deg,
    rgba(235, 203, 203, 0.12) -23.56%,
    rgba(246, 145, 147, 0.12) 31.39%,
    rgba(176, 176, 236, 0.12) 83.13%
  ); */

  --button-accent: linear-gradient(
    62.92deg,
    #1e1955 25%,
    #2416b2 48%,
    #5641e4 76%,
    #ef94a7 96%
  );

  --button-accent-2: linear-gradient(
    62.92deg,
    #1e1955 25%,
    #2416b2 48%,
    #5641e4 76%,
    #ef94a7 96%
  );

  --button-accent-3: linear-gradient(
    62.92deg,
    #ff3c40 48%,
    #fb9164 76%,
    #c4aaf2 96%
  );

  --card-bg-gradient-1: linear-gradient(
    34deg,
    rgba(129, 85, 142, 0) 61.86%,
    rgba(143, 50, 66, 0.3) 76.8%,
    rgba(58, 36, 144, 0.3) 96.31%,
    rgba(26, 25, 120, 0.3) 113.03%
  );

  --card-bg-gradient-2: linear-gradient(
    34deg,
    rgba(129, 85, 142, 0) 61.86%,
    rgba(129, 85, 142, 0.3) 76.8%,
    rgba(43, 94, 138, 0.3) 96.31%,
    rgba(26, 25, 120, 0.3) 113.03%
  );

  --card-bg-gradient-3: linear-gradient(
    34deg,
    rgba(99, 68, 133, 0) 61.86%,
    rgba(102, 68, 128, 0.3) 76.8%,
    rgba(152, 79, 43, 0.3) 96.31%,
    rgba(155, 33, 35, 0.3) 113.03%
  );

  --secondary-darker-5: 13 20 31;
  --secondary-darker-4: 17 26 39;
  --secondary-darker-3: 17 40 64;
  --secondary-darker-2: 17 53 85;
  --secondary-darker-1: 21 68 103;
  --secondary: 27 83 123;
  --secondary-lighter-1: 31 102 146;
  --secondary-lighter-2: 25 124 174;
  --secondary-lighter-3: 124 226 254;
  --secondary-lighter-4: 168 238 255;
  --secondary-lighter-5: 194 243 255;

  --neutral-darker-5: 8 8 8;
  --neutral-darker-4: 13 13 13;
  --neutral-darker-3_5: 20 20 21;
  --neutral-darker-3: 33 34 37;
  --neutral-darker-2: 40 41 45;
  --neutral-darker-1: 48 49 54;
  --neutral: 57 58 64;
  --neutral-lighter-1: 70 72 79;
  --neutral-lighter-2: 94 96 106;
  --neutral-lighter-3: 108 110 121;
  --neutral-lighter-4: 121 123 134;
  --neutral-lighter-5: 178 179 189;

  --info-darker-5: 4 8 19;
  --info-darker-4: 15 21 37;
  --info-darker-3: 20 35 75;
  --info-darker-2: 25 45 102;
  --info-darker-1: 33 55 122;
  --info: 26 53 190;
  --info-lighter-1: 42 66 138;
  --info-lighter-2: 51 79 159;
  --info-lighter-3: 59 92 186;
  --info-lighter-4: 37 71 208;
  --info-lighter-5: 143 179 255;

  --error-darker-5: 15 6 5;
  --error-darker-4: 33 16 15;
  --error-darker-3: 66 6 10;
  --error-darker-2: 92 0 3;
  --error-darker-1: 111 0 8;
  --error: 192 6 37;
  --error-lighter-1: 130 0 21;
  --error-lighter-2: 158 22 35;
  --error-lighter-3: 203 31 47;
  --error-lighter-4: 208 37 51;
  --error-lighter-5: 255 143 138;

  --success-darker-5: 4 10 5;
  --success-darker-4: 15 26 18;
  --success-darker-3: 13 45 25;
  --success-darker-2: 1 61 29;
  --success-darker-1: 0 76 38;
  --success: 0 126 65;
  --success-lighter-1: 4 91 47;
  --success-lighter-2: 4 108 57;
  --success-lighter-3: 0 129 67;
  --success-lighter-4: 23 140 78;
  --success-lighter-5: 105 208 142;

  --warning-darker-5: 10 8 5;
  --warning-darker-4: 26 23 17;
  --warning-darker-3: 39 39 20;
  --warning-darker-2: 52 41 19;
  --warning-darker-1: 64 50 21;
  --warning: 189 143 26;
  --warning-lighter-1: 78 61 25;
  --warning-lighter-2: 98 77 30;
  --warning-lighter-3: 127 98 33;
  --warning-lighter-4: 201 154 44;
  --warning-lighter-5: 223 183 102;

  /*Start Light Color */
  --light-black: 30 31 36;
  --light-white: 255 255 255;

  --light-accent-gradient: linear-gradient(
    63deg,
    #ebcbcb -23.56%,
    #ee3438 31.39%,
    #3636cf 83.13%
  );
  --light-accent-surface: linear-gradient(
    63deg,
    rgba(235, 203, 203, 0.3) -23.56%,
    rgba(246, 145, 147, 0.3) 31.39%,
    rgba(176, 176, 236, 0.3) 83.13%
  );

  --light-button-accent: linear-gradient(
    63deg,
    rgba(235, 203, 203, 0.12) -23.56%,
    rgba(246, 145, 147, 0.12) 31.39%,
    rgba(176, 176, 236, 0.12) 83.13%
  );

  --light-secondary-darker-5: 29 62 86;
  --light-secondary-darker-4: 0 116 158;
  --light-secondary-darker-3: 116 218 248;
  --light-secondary-darker-2: 124 226 254;
  --light-secondary-darker-1: 96 179 215;
  --light-secondary: 141 202 227;
  --light-secondary-lighter-1: 169 218 237;
  --light-secondary-lighter-2: 190 231 245;
  --light-secondary-lighter-3: 209 240 250;
  --light-secondary-lighter-4: 225 246 253;
  --light-secondary-lighter-5: 241 250 253;

  --light-neutral-darker-5: 30 31 36;
  --light-neutral-darker-4: 98 99 108;
  --light-neutral-darker-3: 128 130 141;
  --light-neutral-darker-2: 139 141 152;
  --light-neutral-darker-1: 185 187 198;
  --light-neutral: 205 206 215;
  --light-neutral-lighter-1: 224 225 230;
  --light-neutral-lighter-2: 231 232 236;
  --light-neutral-lighter-3: 239 240 243;
  --light-neutral-lighter-4: 249 249 251;
  --light-neutral-lighter-5: 252 252 253;

  --light-info-darker-5: 18 35 104;
  --light-info-darker-4: 24 47 139;
  --light-info-darker-3: 31 59 173;
  --light-info-darker-2: 37 71 208;
  --light-info-darker-1: 53 89 233;
  --light-info: 51 92 255;
  --light-info-lighter-1: 104 149 255;
  --light-info-lighter-2: 151 186 255;
  --light-info-lighter-3: 192 213 255;
  --light-info-lighter-4: 213 226 255;
  --light-info-lighter-5: 235 241 255;

  --light-error-darker-5: 104 18 25;
  --light-error-darker-4: 139 24 34;
  --light-error-darker-3: 173 31 43;
  --light-error-darker-2: 208 37 51;
  --light-error-darker-1: 233 53 68;
  --light-error: 251 55 72;
  --light-error-lighter-1: 255 104 117;
  --light-error-lighter-2: 255 151 160;
  --light-error-lighter-3: 255 192 197;
  --light-error-lighter-4: 255 213 216;
  --light-error-lighter-5: 255 235 236;

  --light-success-darker-5: 11 70 39;
  --light-success-darker-4: 22 100 59;
  --light-success-darker-3: 26 117 68;
  --light-success-darker-2: 23 140 78;
  --light-success-darker-1: 29 175 97;
  --light-success: 31 193 107;
  --light-success-lighter-1: 62 224 137;
  --light-success-lighter-2: 132 235 180;
  --light-success-lighter-3: 194 245 218;
  --light-success-lighter-4: 208 251 233;
  --light-success-lighter-5: 224 250 236;

  --light-warning-darker-5: 98 76 24;
  --light-warning-darker-4: 167 128 37;
  --light-warning-darker-3: 167 128 37;
  --light-warning-darker-2: 201 154 44;
  --light-warning-darker-1: 230 168 25;
  --light-warning: 246 181 30;
  --light-warning-lighter-1: 255 210 104;
  --light-warning-lighter-2: 255 224 151;
  --light-warning-lighter-3: 255 236 192;
  --light-warning-lighter-4: 255 252 204;
  --light-warning-lighter-5: 255 250 235;
  /* End Light Color */

  --alert-success-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(208, 251, 233, 0.5) 0%,
      rgba(208, 251, 233, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(208, 251, 233, 0.5) 0%,
      rgba(208, 251, 233, 0) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--neutral-darker-5)),
      rgb(var(--neutral-darker-5))
    );

  --alert-info-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(59, 92, 186, 0.3) 0%,
      rgba(59, 92, 186, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(59, 92, 186, 0.3) 0%,
      rgba(59, 92, 186, 0) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--neutral-darker-5)),
      rgb(var(--neutral-darker-5))
    );

  --alert-warning-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(223, 183, 102, 0.3) 0%,
      rgba(223, 183, 102, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(223, 183, 102, 0.3) 0%,
      rgba(223, 183, 102, 0) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--neutral-darker-5)),
      rgb(var(--neutral-darker-5))
    );

  --alert-error-bg:
    radial-gradient(
      44.09% 107.51% at 114.37% 56.79%,
      rgba(139, 24, 34, 0.2) 0%,
      rgba(139, 24, 34, 0) 100%
    ),
    radial-gradient(
      47.78% 116.51% at -16.17% 40.9%,
      rgba(139, 24, 34, 0.2) 0%,
      rgba(139, 24, 34, 0) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--neutral-darker-5)),
      rgb(var(--neutral-darker-5))
    );

  /* Actionable Colors for Background */
  --page-background: var(--neutral-darker-4);
  --navigation-bg: var(--neutral-darker-5);
  --sidebar-item: var(--neutral-darker-3);
  --button-primary-default: var(--white);
  --button-primary-hover: var(--light-neutral-lighter-4);
  --button-secondary-default: var(--neutral-darker-3);
  --button-secondary-hover: var(--light-neutral-lighter-4);
  --error-default: var(--light-error-darker-1);
  --error-hover: var(--error-lighter-1);
  --progress-bar: var(--neutral);
  --on-progress-bar: var(--neutral-lighter-3);

  /* Actionable Colors for Text */
  --text-primary: var(--white);
  --text-secondary: var(--neutral-lighter-3);
  --text-placeholder: var(--neutral-lighter-3);
  --text-disabled: var(--neutral-lighter-1);
  --text-error: var(--light-error-darker-1);
  --text-primary-button: var(--neutral-darker-5);
  --text-secondary-button: var(--neutral-darker-5);
  --text-sidebar: var(--white);

  /* Actionable Colors for Links */
  --link-primary-default: var(--white);
  --link-primary-hover: var(--light-neutral-lighter-3);
  --link-disabled: var(--neutral-lighter-4);
  --link-secondary-default: var(--info-lighter-5);
  --link-secondary-hover: var(--info-lighter-3);
  --link-error-default: var(--error-lighter-5);
  --link-error-hover: var(--error-lighter-3);

  /* Actionable Colors for Border */
  --border-card-default: var(--neutral-darker-2);
  --border-card-hover: var(--neutral-lighter-3);
  --border-button: var(--neutral-lighter-4);
  --border-button-white: var(--white);
  --border-field-default: var(--neutral-darker-1);

  /* Actionable Colors for Surface */
  --surface-primary: 94 96 106 / 10%;
  --surface-hover: 94 96 106 / 25%;
  --surface-disabled: var(--neutral-darker-2);
  --surface-field: var(--neutral-darker-3);
  --surface-white: var(--white);

  /* Actionable Colors for Surface Red */
  --red-background: var(--error-darker-3);
  --red-text: var(--light-error-lighter-1);

  /* Actionable Colors for Surface Green */
  --green-background: var(--success-darker-3);
  --green-text: var(--light-success);

  /* Actionable Colors for Surface Blue */
  --blue-background: var(--info-darker-3);
  --blue-text: var(--info-lighter-5);
  --blue-background-solid: var(--light-info);

  /* Actionable Colors for Surface Yellow */
  --yellow-background: var(--warning-darker-3);
  --yellow-text: var(--light-warning);

  /* Actionable Colors for Surface Neutral */
  --neutral-background: var(--neutral-darker-3);
  --neutral-text: var(--white);

  /* Actionable Colors for Surface Sky Blue */
  --sky-blue-background: var(--secondary-darker-3);
  --sky-blue-text: var(--white);
  --sky-blue-checked: var(--secondary-darker-2);
  --sky-blue-checked-high-contrast: var(--secondary-darker-1);
  --checked: var(--light-secondary-darker-2);

  /* Actionable Colors for Surface Sky Blue (Loading) */
  --loading-1: var(--secondary-lighter);
  --loading-2: var(--secondary-lighter-1);
  --loading-3: var(--secondary-lighter-2);
  --loading-4: var(--secondary-lighter-3);
  --loading-5: var(--secondary-lighter-4);
  --loading-6: var(--secondary-lighter-5);

  /* active menu */
  --active-menu: radial-gradient(
    49.48% 50.59% at 100% 50%,
    #fff 10%,
    rgba(255, 255, 255, 0) 90.2%
  );

  /* Start shadcn css variable */
  --background: var(--page-background);
  --foreground: 248 250 252;
  --card-bg: var(--neutral-darker-3_5);
  --card-bg-foreground: var(--white);
  --sidebar-bg-foreground: var(--white);
  --popover: 2 8 23;
  --popover-foreground: 248 250 252;
  --primary: var(--text-primary);
  --primary-foreground: 15 23 42;
  --secondary-foreground: var(--text-secondary);
  --muted: 30 41 59;
  --muted-foreground: 148 163 184;
  --accent: var(--accent-gradient);
  --accent-foreground: var(--blue-text);
  --accent-2: var(--accent-gradient-2);
  --accent-2-foreground: var(--blue-text);
  --accent-3: var(--accent-gradient-3);
  --accent-3-foreground: var(--blue-text);
  --success-foreground: var(--green-text);
  --destructive: var(--red-background);
  --destructive-foreground: var(--red-text);
  --border: 30 41 59;
  --input: 30 41 59;
  --ring: 203 213 225;
  --chart-1: 38 98 217;
  --chart-2: 46 184 138;
  --chart-3: 232 140 48;
  --chart-4: 175 87 219;
  --chart-5: 226 54 112;
  --sidebar-bg: var(--neutral-darker-3_5);
  /* End shadcn css variable */
}