/*!***************************
*****    colors.css      *****
*****************************/

@layer utilities {
  /*
  * primary
  * ===========
  */
  .text-primary-100 {
    color: var(--clr-primary-100);
  }

  .text-primary-200 {
    color: var(--clr-primary-200);
  }

  .text-primary-300 {
    color: var(--clr-primary-300);
  }

  .text-primary-400 {
    color: var(--clr-primary-400);
  }

  .text-primary-500 {
    color: var(--clr-primary-500);
  }

  .text-primary-600 {
    color: var(--clr-primary-600);
  }

  .text-primary-700 {
    color: var(--clr-primary-700);
  }

  .text-primary-800 {
    color: var(--clr-primary-800);
  }

  .text-primary-900 {
    color: var(--clr-primary-900);
  }

  /*
  * secondary
  * ===========
  */
  .text-secondary-100 {
    color: var(--clr-secondary-100);
  }

  .text-secondary-200 {
    color: var(--clr-secondary-200);
  }

  .text-secondary-300 {
    color: var(--clr-secondary-300);
  }

  .text-secondary-400 {
    color: var(--clr-secondary-400);
  }

  .text-secondary-500 {
    color: var(--clr-secondary-500);
  }

  .text-secondary-600 {
    color: var(--clr-secondary-600);
  }

  .text-secondary-700 {
    color: var(--clr-secondary-700);
  }

  .text-secondary-800 {
    color: var(--clr-secondary-800);
  }

  .text-secondary-900 {
    color: var(--clr-secondary-900);
  }

  /*
  * tertiary
  * ===========
  */
  .text-tertiary-100 {
    color: var(--clr-tertiary-100);
  }

  .text-tertiary-200 {
    color: var(--clr-tertiary-200);
  }

  .text-tertiary-300 {
    color: var(--clr-tertiary-300);
  }

  .text-tertiary-400 {
    color: var(--clr-tertiary-400);
  }

  .text-tertiary-500 {
    color: var(--clr-tertiary-500);
  }

  .text-tertiary-600 {
    color: var(--clr-tertiary-600);
  }

  .text-tertiary-700 {
    color: var(--clr-tertiary-700);
  }

  .text-tertiary-800 {
    color: var(--clr-tertiary-800);
  }

  .text-tertiary-900 {
    color: var(--clr-tertiary-900);
  }

  /*
  * dark
  * ===========
  */
  .text-dark-100 {
    color: var(--clr-dark-100);
  }

  .text-dark-200 {
    color: var(--clr-dark-200);
  }

  .text-dark-300 {
    color: var(--clr-dark-300);
  }

  .text-dark-400 {
    color: var(--clr-dark-400);
  }

  .text-dark-500 {
    color: var(--clr-dark-500);
  }

  .text-dark-600 {
    color: var(--clr-dark-600);
  }

  .text-dark-700 {
    color: var(--clr-dark-700);
  }

  .text-dark-800 {
    color: var(--clr-dark-800);
  }

  .text-dark-900 {
    color: var(--clr-dark-900);
  }

  /*
  * light
  * ===========
  */
  .text-light-100 {
    color: var(--clr-light-100);
  }

  .text-light-200 {
    color: var(--clr-light-200);
  }

  .text-light-300 {
    color: var(--clr-light-300);
  }

  .text-light-400 {
    color: var(--clr-light-400);
  }

  .text-light-500 {
    color: var(--clr-light-500);
  }

  .text-light-600 {
    color: var(--clr-light-600);
  }

  .text-light-700 {
    color: var(--clr-light-700);
  }

  .text-light-800 {
    color: var(--clr-light-800);
  }

  .text-light-900 {
    color: var(--clr-light-900);
  }

  /*
  * bg
  * ===========
  */
  .text-bg-100 {
    color: var(--clr-bg-100);
  }

  .text-bg-200 {
    color: var(--clr-bg-200);
  }

  .text-bg-300 {
    color: var(--clr-bg-300);
  }

  .text-bg-400 {
    color: var(--clr-bg-400);
  }

  .text-bg-500 {
    color: var(--clr-bg-500);
  }

  .text-bg-600 {
    color: var(--clr-bg-600);
  }

  .text-bg-700 {
    color: var(--clr-bg-700);
  }

  .text-bg-800 {
    color: var(--clr-bg-800);
  }

  .text-bg-900 {
    color: var(--clr-bg-900);
  }

  /*
  * fg
  * ===========
  */
  .text-fg-100 {
    color: var(--clr-fg-100);
  }

  .text-fg-200 {
    color: var(--clr-fg-200);
  }

  .text-fg-300 {
    color: var(--clr-fg-300);
  }

  .text-fg-400 {
    color: var(--clr-fg-400);
  }

  .text-fg-500 {
    color: var(--clr-fg-500);
  }

  .text-fg-600 {
    color: var(--clr-fg-600);
  }

  .text-fg-700 {
    color: var(--clr-fg-700);
  }

  .text-fg-800 {
    color: var(--clr-fg-800);
  }

  .text-fg-900 {
    color: var(--clr-fg-900);
  }

  /*
  *  contrast to PRIMARY
  * =========================
  */
  .contrast-to-primary-500 {
    color: contrast-color(var(--clr-primary-500));
  }

  /*
  *  contrast to SECONDARY
  * =======================
  */
  .contrast-to-secondary-500 {
    color: contrast-color(var(--clr-secondary-500));
  }

  /*
  *  contrast to TERTIARY
  * =========================
  */
  .contrast-to-tertiary-500 {
    color: contrast-color(var(--clr-tertiary-500));
  }
}