:root {
  /* Blue */
  --blue: #0d6efd;
  --blue-100: #cfe2ff;
  --blue-200: #9ec5fe;
  --blue-300: #6ea8fe;
  --blue-400: #3d8bfd;
  --blue-500: #0d6efd;
  --blue-600: #0a58ca;
  --blue-700: #084298;
  --blue-800: #052c65;
  --blue-900: #031633;

  /* Indigo */
  --indigo: #6610f2;
  --indigo-100: #e0cffc;
  --indigo-200: #c29ffc;
  --indigo-300: #a370f9;
  --indigo-400: #8540f5;
  --indigo-500: #6610f2;
  --indigo-600: #520dc2;
  --indigo-700: #3d0a91;
  --indigo-800: #290661;
  --indigo-900: #140331;

  /* Purple */
  --purple: #6f42c1;
  --purple-100: #e2d9f3;
  --purple-200: #c5b3e6;
  --purple-300: #a98eda;
  --purple-400: #8c68cd;
  --purple-500: #6f42c1;
  --purple-600: #59359a;
  --purple-700: #432874;
  --purple-800: #2c1a4d;
  --purple-900: #160d27;

  /* Pink */
  --pink: #d63384;
  --pink-100: #f8d7da;
  --pink-200: #f1a6b8;
  --pink-300: #eb7195;
  --pink-400: #e54372;
  --pink-500: #d63384;
  --pink-600: #b52a69;
  --pink-700: #941f4f;
  --pink-800: #731434;
  --pink-900: #520a1a;

  /* Red */
  --red: #dc3545;
  --red-100: #f8d7da;
  --red-200: #f1a6a6;
  --red-300: #e78181;
  --red-400: #dc5959;
  --red-500: #dc3545;
  --red-600: #b52a34;
  --red-700: #8e1f23;
  --red-800: #661411;
  --red-900: #400a07;

  /* Orange */
  --orange: #fd7e14;
  --orange-100: #ffeba1;
  --orange-200: #ffd06b;
  --orange-300: #ffb639;
  --orange-400: #ff9b05;
  --orange-500: #fd7e14;
  --orange-600: #ca590f;
  --orange-700: #98310a;
  --orange-800: #661805;
  --orange-900: #330d02;

  /* Yellow */
  --yellow: #ffc107;
  --yellow-100: #fff3cd;
  --yellow-200: #ffe99d;
  --yellow-300: #ffdf6d;
  --yellow-400: #ffd43b;
  --yellow-500: #ffc107;
  --yellow-600: #e0a200;
  --yellow-700: #b38200;
  --yellow-800: #866200;
  --yellow-900: #594100;

  /* Green */
  --green: #198754;
  --green-100: #d4edda;
  --green-200: #a9dbbc;
  --green-300: #7cc99d;
  --green-400: #52b580;
  --green-500: #198754;
  --green-600: #145f3f;
  --green-700: #0f4530;
  --green-800: #092a20;
  --green-900: #04150f;

  /* Teal */
  --teal: #20c997;
  --teal-100: #c3fae8;
  --teal-200: #8ceacb;
  --teal-300: #4dddb3;
  --teal-400: #20d6a3;
  --teal-500: #20c997;
  --teal-600: #1aaf82;
  --teal-700: #138a68;
  --teal-800: #0d674f;
  --teal-900: #06412f;

  /* Cyan */
  --cyan: #0dcaf0;
  --cyan-100: #cff4fc;
  --cyan-200: #9eeaf9;
  --cyan-300: #6edffa;
  --cyan-400: #3dd3f8;
  --cyan-500: #0dcaf0;
  --cyan-600: #0aa3c4;
  --cyan-700: #087a97;
  --cyan-800: #055068;
  --cyan-900: #032838;

  /* Darker Gray */
  /* Even Darker Gray - Almost Black */
  --gray-100: #9a9b9c;
  --gray-200: #77797a;
  --gray-300: #555758;
  --gray-400: #3d3f40;
  --gray-500: #2c2e2f;
  --gray-600: #1f2021;
  --gray-700: #161718;
  --gray-800: #0d0e0f;
  --gray-900: #050506;

  /* Custom Dark Green */
  --dark-green: #19443c;
  --dark-green-100: #b0d5d0;
  --dark-green-200: #7fae9c;
  --dark-green-300: #4f8768;
  --dark-green-400: #3b6d55;
  --dark-green-500: #19443c;
  --dark-green-600: #133d35;
  --dark-green-700: #0f2f2b;
  --dark-green-800: #0b2220;
  --dark-green-900: #071715;

  /* Custom Teal */
  --teal2: #194441;
  --teal2-100: #b0d6d5;
  --teal2-200: #88b8b6;
  --teal2-300: #629f9f;
  --teal2-400: #4c8888;
  --teal2-500: #194441;
  --teal2-600: #15363b;
  --teal2-700: #0f2a29;
  --teal2-800: #0a1d1d;
  --teal2-900: #05121b;

  /* Custom Charcoal Green */
  --charcoal-green: #11302e;
  --charcoal-green-100: #8e9d98;
  --charcoal-green-200: #6f7f76;
  --charcoal-green-300: #4f6155;
  --charcoal-green-400: #3f4c44;
  --charcoal-green-500: #11302e;
  --charcoal-green-600: #0e2a2a;
  --charcoal-green-700: #0b2222;
  --charcoal-green-800: #071a1a;
  --charcoal-green-900: #051616;

  /* Custom Dark Brown */
  --dark-brown: #442919;
  --dark-brown-100: #a98c7d;
  --dark-brown-200: #8a6e5e;
  --dark-brown-300: #7b5a4a;
  --dark-brown-400: #6c4735;
  --dark-brown-500: #442919;
  --dark-brown-600: #3b1e19;
  --dark-brown-700: #2d1613;
  --dark-brown-800: #1f0e0c;
  --dark-brown-900: #140703;

  /* Custom Deep Brown */
  --deep-brown: #301d11;
  --deep-brown-100: #92755d;
  --deep-brown-200: #7a5f4b;
  --deep-brown-300: #6b4a39;
  --deep-brown-400: #5d3b28;
  --deep-brown-500: #301d11;
  --deep-brown-600: #2a1a0f;
  --deep-brown-700: #22160e;
  --deep-brown-800: #1b120c;
  --deep-brown-900: #150e09;
}

/*}


/* Custom Dark Green Classes */
.color-dark-green {
  background-color: var(--dark-green);
}
.color-dark-green-100 {
  background-color: var(--dark-green-100);
}
.color-dark-green-200 {
  background-color: var(--dark-green-200);
}
.color-dark-green-300 {
  background-color: var(--dark-green-300);
}
.color-dark-green-400 {
  background-color: var(--dark-green-400);
}
.color-dark-green-500 {
  background-color: var(--dark-green-500);
}
.color-dark-green-600 {
  background-color: var(--dark-green-600);
}
.color-dark-green-700 {
  background-color: var(--dark-green-700);
}
.color-dark-green-800 {
  background-color: var(--dark-green-800);
}
.color-dark-green-900 {
  background-color: var(--dark-green-900);
}

/* Custom Teal Classes */
.color-teal2 {
  background-color: var(--teal2);
}
.color-teal2-100 {
  background-color: var(--teal2-100);
}
.color-teal2-200 {
  background-color: var(--teal2-200);
}
.color-teal2-300 {
  background-color: var(--teal2-300);
}
.color-teal2-400 {
  background-color: var(--teal2-400);
}
.color-teal2-500 {
  background-color: var(--teal2-500);
}
.color-teal2-600 {
  background-color: var(--teal2-600);
}
.color-teal2-700 {
  background-color: var(--teal2-700);
}
.color-teal2-800 {
  background-color: var(--teal2-800);
}
.color-teal2-900 {
  background-color: var(--teal2-900);
}

/* Custom Charcoal Green Classes */
.color-charcoal-green {
  background-color: var(--charcoal-green);
}
.color-charcoal-green-100 {
  background-color: var(--charcoal-green-100);
}
.color-charcoal-green-200 {
  background-color: var(--charcoal-green-200);
}
.color-charcoal-green-300 {
  background-color: var(--charcoal-green-300);
}
.color-charcoal-green-400 {
  background-color: var(--charcoal-green-400);
}
.color-charcoal-green-500 {
  background-color: var(--charcoal-green-500);
}
.color-charcoal-green-600 {
  background-color: var(--charcoal-green-600);
}
.color-charcoal-green-700 {
  background-color: var(--charcoal-green-700);
}
.color-charcoal-green-800 {
  background-color: var(--charcoal-green-800);
}
.color-charcoal-green-900 {
  background-color: var(--charcoal-green-900);
}

/* Custom Dark Brown Classes */
.color-dark-brown {
  background-color: var(--dark-brown);
}
.color-dark-brown-100 {
  background-color: var(--dark-brown-100);
}
.color-dark-brown-200 {
  background-color: var(--dark-brown-200);
}
.color-dark-brown-300 {
  background-color: var(--dark-brown-300);
}
.color-dark-brown-400 {
  background-color: var(--dark-brown-400);
}
.color-dark-brown-500 {
  background-color: var(--dark-brown-500);
}
.color-dark-brown-600 {
  background-color: var(--dark-brown-600);
}
.color-dark-brown-700 {
  background-color: var(--dark-brown-700);
}
.color-dark-brown-800 {
  background-color: var(--dark-brown-800);
}
.color-dark-brown-900 {
  background-color: var(--dark-brown-900);
}

/* Custom Deep Brown Classes */
.color-deep-brown {
  background-color: var(--deep-brown);
}
.color-deep-brown-100 {
  background-color: var(--deep-brown-100);
}
.color-deep-brown-200 {
  background-color: var(--deep-brown-200);
}
.color-deep-brown-300 {
  background-color: var(--deep-brown-300);
}
.color-deep-brown-400 {
  background-color: var(--deep-brown-400);
}
.color-deep-brown-500 {
  background-color: var(--deep-brown-500);
}
.color-deep-brown-600 {
  background-color: var(--deep-brown-600);
}
.color-deep-brown-700 {
  background-color: var(--deep-brown-700);
}
.color-deep-brown-800 {
  background-color: var(--deep-brown-800);
}
.color-deep-brown-900 {
  background-color: var(--deep-brown-900);
}

/* Clases CSS para cada color */
.color-blue {
  background-color: var(--blue);
}
.color-blue-100 {
  background-color: var(--blue-100);
}
.color-blue-200 {
  background-color: var(--blue-200);
}
.color-blue-300 {
  background-color: var(--blue-300);
}
.color-blue-400 {
  background-color: var(--blue-400);
}
.color-blue-500 {
  background-color: var(--blue-500);
}
.color-blue-600 {
  background-color: var(--blue-600);
}
.color-blue-700 {
  background-color: var(--blue-700);
}
.color-blue-800 {
  background-color: var(--blue-800);
}
.color-blue-900 {
  background-color: var(--blue-900);
}

.color-indigo {
  background-color: var(--indigo);
}
.color-indigo-100 {
  background-color: var(--indigo-100);
}
.color-indigo-200 {
  background-color: var(--indigo-200);
}
.color-indigo-300 {
  background-color: var(--indigo-300);
}
.color-indigo-400 {
  background-color: var(--indigo-400);
}
.color-indigo-500 {
  background-color: var(--indigo-500);
}
.color-indigo-600 {
  background-color: var(--indigo-600);
}
.color-indigo-700 {
  background-color: var(--indigo-700);
}
.color-indigo-800 {
  background-color: var(--indigo-800);
}
.color-indigo-900 {
  background-color: var(--indigo-900);
}

.color-purple {
  background-color: var(--purple);
}
.color-purple-100 {
  background-color: var(--purple-100);
}
.color-purple-200 {
  background-color: var(--purple-200);
}
.color-purple-300 {
  background-color: var(--purple-300);
}
.color-purple-400 {
  background-color: var(--purple-400);
}
.color-purple-500 {
  background-color: var(--purple-500);
}
.color-purple-600 {
  background-color: var(--purple-600);
}
.color-purple-700 {
  background-color: var(--purple-700);
}
.color-purple-800 {
  background-color: var(--purple-800);
}
.color-purple-900 {
  background-color: var(--purple-900);
}

.color-pink {
  background-color: var(--pink);
}
.color-pink-100 {
  background-color: var(--pink-100);
}
.color-pink-200 {
  background-color: var(--pink-200);
}
.color-pink-300 {
  background-color: var(--pink-300);
}
.color-pink-400 {
  background-color: var(--pink-400);
}
.color-pink-500 {
  background-color: var(--pink-500);
}
.color-pink-600 {
  background-color: var(--pink-600);
}
.color-pink-700 {
  background-color: var(--pink-700);
}
.color-pink-800 {
  background-color: var(--pink-800);
}
.color-pink-900 {
  background-color: var(--pink-900);
}

.color-red {
  background-color: var(--red);
}
.color-red-100 {
  background-color: var(--red-100);
}
.color-red-200 {
  background-color: var(--red-200);
}
.color-red-300 {
  background-color: var(--red-300);
}
.color-red-400 {
  background-color: var(--red-400);
}
.color-red-500 {
  background-color: var(--red-500);
}
.color-red-600 {
  background-color: var(--red-600);
}

.color-red-700 {
  background-color: var(--red-700);
}
.color-red-800 {
  background-color: var(--red-800);
}
.color-red-900 {
  background-color: var(--red-900);
}

.color-orange {
  background-color: var(--orange);
}
.color-orange-100 {
  background-color: var(--orange-100);
}
.color-orange-200 {
  background-color: var(--orange-200);
}
.color-orange-300 {
  background-color: var(--orange-300);
}
.color-orange-400 {
  background-color: var(--orange-400);
}
.color-orange-500 {
  background-color: var(--orange-500);
}
.color-orange-600 {
  background-color: var(--orange-600);
}
.color-orange-700 {
  background-color: var(--orange-700);
}
.color-orange-800 {
  background-color: var(--orange-800);
}
.color-orange-900 {
  background-color: var(--orange-900);
}

.color-yellow {
  background-color: var(--yellow);
}
.color-yellow-100 {
  background-color: var(--yellow-100);
}
.color-yellow-200 {
  background-color: var(--yellow-200);
}
.color-yellow-300 {
  background-color: var(--yellow-300);
}
.color-yellow-400 {
  background-color: var(--yellow-400);
}
.color-yellow-500 {
  background-color: var(--yellow-500);
}
.color-yellow-600 {
  background-color: var(--yellow-600);
}
.color-yellow-700 {
  background-color: var(--yellow-700);
}
.color-yellow-800 {
  background-color: var(--yellow-800);
}
.color-yellow-900 {
  background-color: var(--yellow-900);
}

.color-green {
  background-color: var(--green);
}
.color-green-100 {
  background-color: var(--green-100);
}
.color-green-200 {
  background-color: var(--green-200);
}
.color-green-300 {
  background-color: var(--green-300);
}
.color-green-400 {
  background-color: var(--green-400);
}
.color-green-500 {
  background-color: var(--green-500);
}
.color-green-600 {
  background-color: var(--green-600);
}
.color-green-700 {
  background-color: var(--green-700);
}
.color-green-800 {
  background-color: var(--green-800);
}
.color-green-900 {
  background-color: var(--green-900);
}

.color-teal {
  background-color: var(--teal);
}
.color-teal-100 {
  background-color: var(--teal-100);
}
.color-teal-200 {
  background-color: var(--teal-200);
}
.color-teal-300 {
  background-color: var(--teal-300);
}
.color-teal-400 {
  background-color: var(--teal-400);
}
.color-teal-500 {
  background-color: var(--teal-500);
}
.color-teal-600 {
  background-color: var(--teal-600);
}
.color-teal-700 {
  background-color: var(--teal-700);
}
.color-teal-800 {
  background-color: var(--teal-800);
}
.color-teal-900 {
  background-color: var(--teal-900);
}

.color-cyan {
  background-color: var(--cyan);
}
.color-cyan-100 {
  background-color: var(--cyan-100);
}
.color-cyan-200 {
  background-color: var(--cyan-200);
}
.color-cyan-300 {
  background-color: var(--cyan-300);
}
.color-cyan-400 {
  background-color: var(--cyan-400);
}
.color-cyan-500 {
  background-color: var(--cyan-500);
}
.color-cyan-600 {
  background-color: var(--cyan-600);
}
.color-cyan-700 {
  background-color: var(--cyan-700);
}
.color-cyan-800 {
  background-color: var(--cyan-800);
}
.color-cyan-900 {
  background-color: var(--cyan-900);
}

.color-gray-100 {
  background-color: var(--gray-100);
}
.color-gray-200 {
  background-color: var(--gray-200);
}
.color-gray-300 {
  background-color: var(--gray-300);
}
.color-gray-400 {
  background-color: var(--gray-400);
}
.color-gray-500 {
  background-color: var(--gray-500);
}
.color-gray-600 {
  background-color: var(--gray-600);
}
.color-gray-700 {
  background-color: var(--gray-700);
}
.color-gray-800 {
  background-color: var(--gray-800);
}
.color-gray-900 {
  background-color: var(--gray-900);
}