/* Colores base */
:root {
  --white: #ffffff;
  --gray-light: #f8f9fa;
  --gray-medium: #6c757d;
  --gray-dark: #343a40;
  --gray-very-dark: #212529;
}

/* Tamaños de texto blanco */
.text-white-xs {
  color: var(--white);
  font-size: 0.75rem;  /* 12px */
  line-height: 1.2;
}

.text-white-sm {
  color: var(--white);
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
}

.text-white-base {
  color: var(--white);
  font-size: 1rem;     /* 16px */
  line-height: 1.5;
}

.text-white-lg {
  color: var(--white);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
}

.text-white-xl {
  color: var(--white);
  font-size: 1.25rem;  /* 20px */
  line-height: 1.6;
}

.text-white-2xl {
  color: var(--white);
  font-size: 1.5rem;   /* 24px */
  line-height: 1.6;
}

.text-white-3xl {
  color: var(--white);
  font-size: 1.875rem; /* 30px */
  line-height: 1.4;
}

.text-white-4xl {
  color: var(--white);
  font-size: 2.25rem;  /* 36px */
  line-height: 1.3;
}

/* Tamaños de texto gris claro */
.text-gray-light-xs {
  color: var(--gray-light);
  font-size: 0.75rem;
  line-height: 1.2;
}

.text-gray-light-sm {
  color: var(--gray-light);
  font-size: 0.875rem;
  line-height: 1.4;
}

.text-gray-light-base {
  color: var(--gray-light);
  font-size: 1rem;
  line-height: 1.5;
}

.text-gray-light-lg {
  color: var(--gray-light);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Tamaños de texto gris medio */
.text-gray-medium-xs {
  color: var(--gray-medium);
  font-size: 0.75rem;
  line-height: 1.2;
}

.text-gray-medium-sm {
  color: var(--gray-medium);
  font-size: 0.875rem;
  line-height: 1.4;
}

.text-gray-medium-base {
  color: var(--gray-medium);
  font-size: 1rem;
  line-height: 1.5;
}

.text-gray-medium-lg {
  color: var(--gray-medium);
  font-size: 1.125rem;
  line-height: 1.6;
}

.text-gray-medium-xl {
  color: var(--gray-medium);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* Tamaños de texto gris oscuro */
.text-gray-dark-xs {
  color: var(--gray-dark);
  font-size: 0.75rem;
  line-height: 1.2;
}

.text-gray-dark-sm {
  color: var(--gray-dark);
  font-size: 0.875rem;
  line-height: 1.4;
}

.text-gray-dark-base {
  color: var(--gray-dark);
  font-size: 1rem;
  line-height: 1.5;
}

.text-gray-dark-lg {
  color: var(--gray-dark);
  font-size: 1.125rem;
  line-height: 1.6;
}

.text-gray-dark-xl {
  color: var(--gray-dark);
  font-size: 1.25rem;
  line-height: 1.6;
}

.text-gray-dark-2xl {
  color: var(--gray-dark);
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Clases de peso de fuente adicionales */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Clases de alineación */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Ejemplo de uso en HTML:
<p class="text-white-lg font-semibold text-center">Texto blanco grande</p>
<span class="text-gray-medium-base">Texto gris medio normal</span>
<h1 class="text-gray-dark-2xl font-bold">Título gris oscuro grande</h1>
*/