sulphuris/dist/sulphuris.css

An adaptable CSS utility library

/* sulphuris v1.0.10 | http://sulphuris.github.io | MIT License */
/*
 * SIZES
 */
/*
 * ORIENTATIONS - 'orientation label': (property)
 */
/*
 * BREAKPOINTS - 'size label': size
 */
/*
 * CONTAINER + GRID
 */
/*
 * COLORS
 */
/*
 * TYPOGRAPHY
 */
/*
 * > If a font-size has not been set on any of the <p>'s ancestors,
 *   then 1em will equal the default browser font-size, which is usually 16px.
 *   So, by default 1em is equivalent to 16px.
 *   - https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems
 */
/*
 * Breakpoint: $container-breakpoint
 *
 * (font-size, letter-spacing, line-height, font-weight, text-transform)
 */
/*
 * Removes unit from a provided value
 *
 * @param $value (string): e.g. `16px`
 * @return (number): e.g. `16`
 */
/*
 * Converts PX to EM values
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1em`
 */
/*
 * Converts PX to REM values (document root relative EM)
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1rem`
 */
/**
 * Turns a format of ('xxl': 1680px, 'xl': 1366px, 'lg': 1024px, 'md': 768px, 'sm': 420px) into a map of breakpoints: ("": (false, 419px), "sm": (420px, 767px), "md": (768px, 1023px), "lg": (1024px, 1365px), "xl": (1366px, 1679px), "xxl": (1680px, false))
 */
/* stylelint-disable */
/*
 * Removes unit from a provided value
 *
 * @param $value (string): e.g. `16px`
 * @return (number): e.g. `16`
 */
/*
 * Converts PX to EM values
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1em`
 */
/*
 * Converts PX to REM values (document root relative EM)
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1rem`
 */
/* stylelint-disable */
/*
 * Generates media query via provided predefined breakpoint map item without
 * @media. Used by `breakpoint` mixin.
 * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
 *
 * @param $size: breakpoint map item name ('', sm, md, lg, xl, xxl)
 * @param $explicit: (boolean | optional) for generating min-max queries
 *
 * @return (string) e.g. `only screen and (min-width: 1366px)` or `only screen and (min-width: 1366px) and (max-width: 1679px)`
 */
/*
 * Mixin for generating media queries. Uses `generate-breakpoint` function
 * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
 *
 * @param $size: (string) breakpoint map item name ('', sm, md, lg, xl, xxl). Size can be `min` or `minimal` which renders as $size: '' and $explicit: true
 * @param $explicit: (boolean | optional) for generating min-max queries
 */
/*
 * Mixin for generating generic utility classes. E.g. `.t-32` => `top: 32px`
 * Uses `generate-breakpoint` function.
 * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
 * @see utils/_config.scss $orientations. $orientations is a globally defined
 * var.
 *
 * @param $pref: (string) base class name
 * @param $property: (string) css property name
 * @param $values: (list | map) list or a map of property values
 * @param $unit: (string) value unit
 * @param $suff: (string) generated class name suffix
 * @param $orientations: (map | optional) map of orientation property variations
 * @param $responsive: (boolean | optional) whether to generate responsive classes
 */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable */
/*
 * Removes unit from a provided value
 *
 * @param $value (string): e.g. `16px`
 * @return (number): e.g. `16`
 */
/*
 * Converts PX to EM values
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1em`
 */
/*
 * Converts PX to REM values (document root relative EM)
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1rem`
 */
/**
 * Turns a format of ('xxl': 1680px, 'xl': 1366px, 'lg': 1024px, 'md': 768px, 'sm': 420px) into a map of breakpoints: ("": (false, 419px), "sm": (420px, 767px), "md": (768px, 1023px), "lg": (1024px, 1365px), "xl": (1366px, 1679px), "xxl": (1680px, false))
 */
/* stylelint-disable */
.border, .border-y, .border-x, .border-r, .border-l, .border-b, .border-t {
  border-color: currentcolor;
  border-style: solid;
  border-width: 1px;
}

.border-t {
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.border-b {
  border-top: none;
  border-left: none;
  border-right: none;
}

.border-l {
  border-bottom: none;
  border-top: none;
  border-right: none;
}

.border-r {
  border-bottom: none;
  border-top: none;
  border-left: none;
}

.border-x {
  border-bottom: none;
  border-top: none;
}

.border-y {
  border-left: none;
  border-right: none;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-6 {
  border-width: 6px;
}

.border-8 {
  border-width: 8px;
}

@media only screen and (min-width: 420px) {
  .border-sm-2 {
    border-width: 2px;
  }
  .border-sm-3 {
    border-width: 3px;
  }
  .border-sm-4 {
    border-width: 4px;
  }
  .border-sm-6 {
    border-width: 6px;
  }
  .border-sm-8 {
    border-width: 8px;
  }
}
@media only screen and (min-width: 768px) {
  .border-md-2 {
    border-width: 2px;
  }
  .border-md-3 {
    border-width: 3px;
  }
  .border-md-4 {
    border-width: 4px;
  }
  .border-md-6 {
    border-width: 6px;
  }
  .border-md-8 {
    border-width: 8px;
  }
}
@media only screen and (min-width: 1024px) {
  .border-lg-2 {
    border-width: 2px;
  }
  .border-lg-3 {
    border-width: 3px;
  }
  .border-lg-4 {
    border-width: 4px;
  }
  .border-lg-6 {
    border-width: 6px;
  }
  .border-lg-8 {
    border-width: 8px;
  }
}
@media only screen and (min-width: 1366px) {
  .border-xl-2 {
    border-width: 2px;
  }
  .border-xl-3 {
    border-width: 3px;
  }
  .border-xl-4 {
    border-width: 4px;
  }
  .border-xl-6 {
    border-width: 6px;
  }
  .border-xl-8 {
    border-width: 8px;
  }
}
@media only screen and (min-width: 1680px) {
  .border-xxl-2 {
    border-width: 2px;
  }
  .border-xxl-3 {
    border-width: 3px;
  }
  .border-xxl-4 {
    border-width: 4px;
  }
  .border-xxl-6 {
    border-width: 6px;
  }
  .border-xxl-8 {
    border-width: 8px;
  }
}
.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-0 {
  border: 0;
}

.border-t-0 {
  border-top: 0;
}

.border-r-0 {
  border-right: 0;
}

.border-b-0 {
  border-bottom: 0;
}

.border-l-0 {
  border-left: 0;
}

.border-x-0 {
  border-right: 0;
  border-left: 0;
}

.border-y-0 {
  border-top: 0;
  border-bottom: 0;
}

@media only screen and (min-width: 420px) {
  .border-sm-0 {
    border: 0;
  }
  .border-t-sm-0 {
    border-top: 0;
  }
  .border-r-sm-0 {
    border-right: 0;
  }
  .border-b-sm-0 {
    border-bottom: 0;
  }
  .border-l-sm-0 {
    border-left: 0;
  }
  .border-x-sm-0 {
    border-right: 0;
    border-left: 0;
  }
  .border-y-sm-0 {
    border-top: 0;
    border-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .border-md-0 {
    border: 0;
  }
  .border-t-md-0 {
    border-top: 0;
  }
  .border-r-md-0 {
    border-right: 0;
  }
  .border-b-md-0 {
    border-bottom: 0;
  }
  .border-l-md-0 {
    border-left: 0;
  }
  .border-x-md-0 {
    border-right: 0;
    border-left: 0;
  }
  .border-y-md-0 {
    border-top: 0;
    border-bottom: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .border-lg-0 {
    border: 0;
  }
  .border-t-lg-0 {
    border-top: 0;
  }
  .border-r-lg-0 {
    border-right: 0;
  }
  .border-b-lg-0 {
    border-bottom: 0;
  }
  .border-l-lg-0 {
    border-left: 0;
  }
  .border-x-lg-0 {
    border-right: 0;
    border-left: 0;
  }
  .border-y-lg-0 {
    border-top: 0;
    border-bottom: 0;
  }
}
@media only screen and (min-width: 1366px) {
  .border-xl-0 {
    border: 0;
  }
  .border-t-xl-0 {
    border-top: 0;
  }
  .border-r-xl-0 {
    border-right: 0;
  }
  .border-b-xl-0 {
    border-bottom: 0;
  }
  .border-l-xl-0 {
    border-left: 0;
  }
  .border-x-xl-0 {
    border-right: 0;
    border-left: 0;
  }
  .border-y-xl-0 {
    border-top: 0;
    border-bottom: 0;
  }
}
@media only screen and (min-width: 1680px) {
  .border-xxl-0 {
    border: 0;
  }
  .border-t-xxl-0 {
    border-top: 0;
  }
  .border-r-xxl-0 {
    border-right: 0;
  }
  .border-b-xxl-0 {
    border-bottom: 0;
  }
  .border-l-xxl-0 {
    border-left: 0;
  }
  .border-x-xxl-0 {
    border-right: 0;
    border-left: 0;
  }
  .border-y-xxl-0 {
    border-top: 0;
    border-bottom: 0;
  }
}
.round {
  border-radius: 50%;
  overflow: hidden;
}

[class*=rounded-] {
  overflow: hidden;
}

.rounded-fix {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.rounded-0 {
  border-radius: 0px;
}

.rounded-4 {
  border-radius: 4px;
}

.rounded-6 {
  border-radius: 6px;
}

.rounded-8 {
  border-radius: 8px;
}

.rounded-16 {
  border-radius: 16px;
}

.rounded-24 {
  border-radius: 24px;
}

.rounded-32 {
  border-radius: 32px;
}

.rounded-tl-0 {
  border-top-left-radius: 0;
}

.rounded-tr-0 {
  border-top-right-radius: 0;
}

.rounded-t-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-r-0 {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.rounded-bl-0 {
  border-bottom-left-radius: 0;
}

.rounded-br-0 {
  border-bottom-right-radius: 0;
}

.rounded-b-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-l-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

button.reset,
.btn {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.btn {
  background-color: var(--color-primary);
  border-radius: 4px;
  color: var(--color-background);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
}
@media only screen and (min-width: 1024px) {
  .btn:hover {
    background-color: var(--color-foreground);
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .btn {
    transition:  color 250ms cubic-bezier(0.86, 0, 0.07, 1), background 250ms cubic-bezier(0.86, 0, 0.07, 1);
  }
}
.btn-inverted {
  background-color: var(--color-foreground);
}
@media only screen and (min-width: 1024px) {
  .btn-inverted:hover {
    background-color: var(--color-primary);
  }
}

.btn-outline {
  background: transparent;
  border: solid 2px var(--color-foreground);
  color: var(--color-foreground);
}
@media only screen and (min-width: 1024px) {
  .btn-outline:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
}
.btn-outline.btn-inverted {
  border-color: var(--color-background);
  color: var(--color-background);
}
@media only screen and (min-width: 1024px) {
  .btn-outline.btn-inverted:hover {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
}

:root {
  --color-foreground: #1a1a1d;
  --color-background: #ffffff;
  --color-black: #1a1a1d;
  --color-white: #ffffff;
  --color-primary: #f6c026;
  --color-gray-500: #8c8c8e;
  --color-gray-600: #707072;
  --color-gray-700: #545455;
  --color-gray-800: #383839;
  --color-gray-900: #1c1c1c;
  --color-gray-100: #e8e8e8;
  --color-gray-200: #d1d1d2;
  --color-gray-300: #bababb;
  --color-gray-400: #a3a3a5;
  --color-yellow-500: #f6c026;
  --color-yellow-600: #c59a1e;
  --color-yellow-700: #947317;
  --color-yellow-800: #624d0f;
  --color-yellow-900: #312608;
  --color-yellow-100: #fdf2d4;
  --color-yellow-200: #fbe6a8;
  --color-yellow-300: #fad97d;
  --color-yellow-400: #f8cd51;
  --color-orange-500: #F4912A;
  --color-orange-600: #c37422;
  --color-orange-700: #925719;
  --color-orange-800: #623a11;
  --color-orange-900: #311d08;
  --color-orange-100: #fde9d4;
  --color-orange-200: #fbd3aa;
  --color-orange-300: #f8bd7f;
  --color-orange-400: #f6a755;
  --color-red-500: #E41328;
  --color-red-600: #b60f20;
  --color-red-700: #890b18;
  --color-red-800: #5b0810;
  --color-red-900: #2e0408;
  --color-red-100: #fad0d4;
  --color-red-200: #f4a1a9;
  --color-red-300: #ef717e;
  --color-red-400: #e94253;
  --color-violet-500: #752A6F;
  --color-violet-600: #5e2259;
  --color-violet-700: #461943;
  --color-violet-800: #2f112c;
  --color-violet-900: #170816;
  --color-violet-100: #e3d4e2;
  --color-violet-200: #c8aac5;
  --color-violet-300: #ac7fa9;
  --color-violet-400: #91558c;
  --color-purple-500: #472573;
  --color-purple-600: #391e5c;
  --color-purple-700: #2b1645;
  --color-purple-800: #1c0f2e;
  --color-purple-900: #0e0717;
  --color-purple-100: #dad3e3;
  --color-purple-200: #b5a8c7;
  --color-purple-300: #917cab;
  --color-purple-400: #6c518f;
  --color-indigo-500: #3F00FF;
  --color-indigo-600: #3200cc;
  --color-indigo-700: #260099;
  --color-indigo-800: #190066;
  --color-indigo-900: #0d0033;
  --color-indigo-100: #d9ccff;
  --color-indigo-200: #b299ff;
  --color-indigo-300: #8c66ff;
  --color-indigo-400: #6533ff;
  --color-blue-500: #0F4EB3;
  --color-blue-600: #0c3e8f;
  --color-blue-700: #092f6b;
  --color-blue-800: #061f48;
  --color-blue-900: #031024;
  --color-blue-100: #cfdcf0;
  --color-blue-200: #9fb8e1;
  --color-blue-300: #6f95d1;
  --color-blue-400: #3f71c2;
  --color-teal-500: #00A4A4;
  --color-teal-600: #008383;
  --color-teal-700: #006262;
  --color-teal-800: #004242;
  --color-teal-900: #002121;
  --color-teal-100: #cceded;
  --color-teal-200: #99dbdb;
  --color-teal-300: #66c8c8;
  --color-teal-400: #33b6b6;
  --color-green-500: #10AF2E;
  --color-green-600: #0d8c25;
  --color-green-700: #0a691c;
  --color-green-800: #064612;
  --color-green-900: #032309;
  --color-green-100: #cfefd5;
  --color-green-200: #9fdfab;
  --color-green-300: #70cf82;
  --color-green-400: #40bf58;
  --color-lime-500: #A4C400;
  --color-lime-600: #839d00;
  --color-lime-700: #627600;
  --color-lime-800: #424e00;
  --color-lime-900: #212700;
  --color-lime-100: #edf3cc;
  --color-lime-200: #dbe799;
  --color-lime-300: #c8dc66;
  --color-lime-400: #b6d033;
}

.text-foreground {
  color: var(--color-foreground);
}

.text-background {
  color: var(--color-background);
}

.text-black {
  color: var(--color-black);
}

.text-white {
  color: var(--color-white);
}

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

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

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

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

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

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

.text-gray-100 {
  color: var(--color-gray-100);
}

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

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

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

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

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

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

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

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

.text-yellow-100 {
  color: var(--color-yellow-100);
}

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

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

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

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

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

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

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

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

.text-orange-100 {
  color: var(--color-orange-100);
}

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

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

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

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

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

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

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

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

.text-red-100 {
  color: var(--color-red-100);
}

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

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

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

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

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

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

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

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

.text-violet-100 {
  color: var(--color-violet-100);
}

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

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

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

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

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

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

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

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

.text-purple-100 {
  color: var(--color-purple-100);
}

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

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

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

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

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

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

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

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

.text-indigo-100 {
  color: var(--color-indigo-100);
}

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

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

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

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

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

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

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

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

.text-blue-100 {
  color: var(--color-blue-100);
}

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

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

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

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

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

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

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

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

.text-teal-100 {
  color: var(--color-teal-100);
}

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

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

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

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

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

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

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

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

.text-green-100 {
  color: var(--color-green-100);
}

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

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

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

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

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

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

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

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

.text-lime-100 {
  color: var(--color-lime-100);
}

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

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

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

@media only screen and (min-width: 420px) {
  .text-sm-foreground {
    color: var(--color-foreground);
  }
  .text-sm-background {
    color: var(--color-background);
  }
  .text-sm-black {
    color: var(--color-black);
  }
  .text-sm-white {
    color: var(--color-white);
  }
  .text-sm-primary {
    color: var(--color-primary);
  }
  .text-sm-gray-500 {
    color: var(--color-gray-500);
  }
  .text-sm-gray-600 {
    color: var(--color-gray-600);
  }
  .text-sm-gray-700 {
    color: var(--color-gray-700);
  }
  .text-sm-gray-800 {
    color: var(--color-gray-800);
  }
  .text-sm-gray-900 {
    color: var(--color-gray-900);
  }
  .text-sm-gray-100 {
    color: var(--color-gray-100);
  }
  .text-sm-gray-200 {
    color: var(--color-gray-200);
  }
  .text-sm-gray-300 {
    color: var(--color-gray-300);
  }
  .text-sm-gray-400 {
    color: var(--color-gray-400);
  }
  .text-sm-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-sm-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-sm-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-sm-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-sm-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-sm-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-sm-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-sm-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-sm-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-sm-orange-500 {
    color: var(--color-orange-500);
  }
  .text-sm-orange-600 {
    color: var(--color-orange-600);
  }
  .text-sm-orange-700 {
    color: var(--color-orange-700);
  }
  .text-sm-orange-800 {
    color: var(--color-orange-800);
  }
  .text-sm-orange-900 {
    color: var(--color-orange-900);
  }
  .text-sm-orange-100 {
    color: var(--color-orange-100);
  }
  .text-sm-orange-200 {
    color: var(--color-orange-200);
  }
  .text-sm-orange-300 {
    color: var(--color-orange-300);
  }
  .text-sm-orange-400 {
    color: var(--color-orange-400);
  }
  .text-sm-red-500 {
    color: var(--color-red-500);
  }
  .text-sm-red-600 {
    color: var(--color-red-600);
  }
  .text-sm-red-700 {
    color: var(--color-red-700);
  }
  .text-sm-red-800 {
    color: var(--color-red-800);
  }
  .text-sm-red-900 {
    color: var(--color-red-900);
  }
  .text-sm-red-100 {
    color: var(--color-red-100);
  }
  .text-sm-red-200 {
    color: var(--color-red-200);
  }
  .text-sm-red-300 {
    color: var(--color-red-300);
  }
  .text-sm-red-400 {
    color: var(--color-red-400);
  }
  .text-sm-violet-500 {
    color: var(--color-violet-500);
  }
  .text-sm-violet-600 {
    color: var(--color-violet-600);
  }
  .text-sm-violet-700 {
    color: var(--color-violet-700);
  }
  .text-sm-violet-800 {
    color: var(--color-violet-800);
  }
  .text-sm-violet-900 {
    color: var(--color-violet-900);
  }
  .text-sm-violet-100 {
    color: var(--color-violet-100);
  }
  .text-sm-violet-200 {
    color: var(--color-violet-200);
  }
  .text-sm-violet-300 {
    color: var(--color-violet-300);
  }
  .text-sm-violet-400 {
    color: var(--color-violet-400);
  }
  .text-sm-purple-500 {
    color: var(--color-purple-500);
  }
  .text-sm-purple-600 {
    color: var(--color-purple-600);
  }
  .text-sm-purple-700 {
    color: var(--color-purple-700);
  }
  .text-sm-purple-800 {
    color: var(--color-purple-800);
  }
  .text-sm-purple-900 {
    color: var(--color-purple-900);
  }
  .text-sm-purple-100 {
    color: var(--color-purple-100);
  }
  .text-sm-purple-200 {
    color: var(--color-purple-200);
  }
  .text-sm-purple-300 {
    color: var(--color-purple-300);
  }
  .text-sm-purple-400 {
    color: var(--color-purple-400);
  }
  .text-sm-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-sm-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-sm-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-sm-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-sm-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-sm-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-sm-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-sm-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-sm-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-sm-blue-500 {
    color: var(--color-blue-500);
  }
  .text-sm-blue-600 {
    color: var(--color-blue-600);
  }
  .text-sm-blue-700 {
    color: var(--color-blue-700);
  }
  .text-sm-blue-800 {
    color: var(--color-blue-800);
  }
  .text-sm-blue-900 {
    color: var(--color-blue-900);
  }
  .text-sm-blue-100 {
    color: var(--color-blue-100);
  }
  .text-sm-blue-200 {
    color: var(--color-blue-200);
  }
  .text-sm-blue-300 {
    color: var(--color-blue-300);
  }
  .text-sm-blue-400 {
    color: var(--color-blue-400);
  }
  .text-sm-teal-500 {
    color: var(--color-teal-500);
  }
  .text-sm-teal-600 {
    color: var(--color-teal-600);
  }
  .text-sm-teal-700 {
    color: var(--color-teal-700);
  }
  .text-sm-teal-800 {
    color: var(--color-teal-800);
  }
  .text-sm-teal-900 {
    color: var(--color-teal-900);
  }
  .text-sm-teal-100 {
    color: var(--color-teal-100);
  }
  .text-sm-teal-200 {
    color: var(--color-teal-200);
  }
  .text-sm-teal-300 {
    color: var(--color-teal-300);
  }
  .text-sm-teal-400 {
    color: var(--color-teal-400);
  }
  .text-sm-green-500 {
    color: var(--color-green-500);
  }
  .text-sm-green-600 {
    color: var(--color-green-600);
  }
  .text-sm-green-700 {
    color: var(--color-green-700);
  }
  .text-sm-green-800 {
    color: var(--color-green-800);
  }
  .text-sm-green-900 {
    color: var(--color-green-900);
  }
  .text-sm-green-100 {
    color: var(--color-green-100);
  }
  .text-sm-green-200 {
    color: var(--color-green-200);
  }
  .text-sm-green-300 {
    color: var(--color-green-300);
  }
  .text-sm-green-400 {
    color: var(--color-green-400);
  }
  .text-sm-lime-500 {
    color: var(--color-lime-500);
  }
  .text-sm-lime-600 {
    color: var(--color-lime-600);
  }
  .text-sm-lime-700 {
    color: var(--color-lime-700);
  }
  .text-sm-lime-800 {
    color: var(--color-lime-800);
  }
  .text-sm-lime-900 {
    color: var(--color-lime-900);
  }
  .text-sm-lime-100 {
    color: var(--color-lime-100);
  }
  .text-sm-lime-200 {
    color: var(--color-lime-200);
  }
  .text-sm-lime-300 {
    color: var(--color-lime-300);
  }
  .text-sm-lime-400 {
    color: var(--color-lime-400);
  }
}
@media only screen and (min-width: 768px) {
  .text-md-foreground {
    color: var(--color-foreground);
  }
  .text-md-background {
    color: var(--color-background);
  }
  .text-md-black {
    color: var(--color-black);
  }
  .text-md-white {
    color: var(--color-white);
  }
  .text-md-primary {
    color: var(--color-primary);
  }
  .text-md-gray-500 {
    color: var(--color-gray-500);
  }
  .text-md-gray-600 {
    color: var(--color-gray-600);
  }
  .text-md-gray-700 {
    color: var(--color-gray-700);
  }
  .text-md-gray-800 {
    color: var(--color-gray-800);
  }
  .text-md-gray-900 {
    color: var(--color-gray-900);
  }
  .text-md-gray-100 {
    color: var(--color-gray-100);
  }
  .text-md-gray-200 {
    color: var(--color-gray-200);
  }
  .text-md-gray-300 {
    color: var(--color-gray-300);
  }
  .text-md-gray-400 {
    color: var(--color-gray-400);
  }
  .text-md-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-md-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-md-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-md-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-md-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-md-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-md-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-md-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-md-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-md-orange-500 {
    color: var(--color-orange-500);
  }
  .text-md-orange-600 {
    color: var(--color-orange-600);
  }
  .text-md-orange-700 {
    color: var(--color-orange-700);
  }
  .text-md-orange-800 {
    color: var(--color-orange-800);
  }
  .text-md-orange-900 {
    color: var(--color-orange-900);
  }
  .text-md-orange-100 {
    color: var(--color-orange-100);
  }
  .text-md-orange-200 {
    color: var(--color-orange-200);
  }
  .text-md-orange-300 {
    color: var(--color-orange-300);
  }
  .text-md-orange-400 {
    color: var(--color-orange-400);
  }
  .text-md-red-500 {
    color: var(--color-red-500);
  }
  .text-md-red-600 {
    color: var(--color-red-600);
  }
  .text-md-red-700 {
    color: var(--color-red-700);
  }
  .text-md-red-800 {
    color: var(--color-red-800);
  }
  .text-md-red-900 {
    color: var(--color-red-900);
  }
  .text-md-red-100 {
    color: var(--color-red-100);
  }
  .text-md-red-200 {
    color: var(--color-red-200);
  }
  .text-md-red-300 {
    color: var(--color-red-300);
  }
  .text-md-red-400 {
    color: var(--color-red-400);
  }
  .text-md-violet-500 {
    color: var(--color-violet-500);
  }
  .text-md-violet-600 {
    color: var(--color-violet-600);
  }
  .text-md-violet-700 {
    color: var(--color-violet-700);
  }
  .text-md-violet-800 {
    color: var(--color-violet-800);
  }
  .text-md-violet-900 {
    color: var(--color-violet-900);
  }
  .text-md-violet-100 {
    color: var(--color-violet-100);
  }
  .text-md-violet-200 {
    color: var(--color-violet-200);
  }
  .text-md-violet-300 {
    color: var(--color-violet-300);
  }
  .text-md-violet-400 {
    color: var(--color-violet-400);
  }
  .text-md-purple-500 {
    color: var(--color-purple-500);
  }
  .text-md-purple-600 {
    color: var(--color-purple-600);
  }
  .text-md-purple-700 {
    color: var(--color-purple-700);
  }
  .text-md-purple-800 {
    color: var(--color-purple-800);
  }
  .text-md-purple-900 {
    color: var(--color-purple-900);
  }
  .text-md-purple-100 {
    color: var(--color-purple-100);
  }
  .text-md-purple-200 {
    color: var(--color-purple-200);
  }
  .text-md-purple-300 {
    color: var(--color-purple-300);
  }
  .text-md-purple-400 {
    color: var(--color-purple-400);
  }
  .text-md-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-md-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-md-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-md-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-md-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-md-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-md-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-md-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-md-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-md-blue-500 {
    color: var(--color-blue-500);
  }
  .text-md-blue-600 {
    color: var(--color-blue-600);
  }
  .text-md-blue-700 {
    color: var(--color-blue-700);
  }
  .text-md-blue-800 {
    color: var(--color-blue-800);
  }
  .text-md-blue-900 {
    color: var(--color-blue-900);
  }
  .text-md-blue-100 {
    color: var(--color-blue-100);
  }
  .text-md-blue-200 {
    color: var(--color-blue-200);
  }
  .text-md-blue-300 {
    color: var(--color-blue-300);
  }
  .text-md-blue-400 {
    color: var(--color-blue-400);
  }
  .text-md-teal-500 {
    color: var(--color-teal-500);
  }
  .text-md-teal-600 {
    color: var(--color-teal-600);
  }
  .text-md-teal-700 {
    color: var(--color-teal-700);
  }
  .text-md-teal-800 {
    color: var(--color-teal-800);
  }
  .text-md-teal-900 {
    color: var(--color-teal-900);
  }
  .text-md-teal-100 {
    color: var(--color-teal-100);
  }
  .text-md-teal-200 {
    color: var(--color-teal-200);
  }
  .text-md-teal-300 {
    color: var(--color-teal-300);
  }
  .text-md-teal-400 {
    color: var(--color-teal-400);
  }
  .text-md-green-500 {
    color: var(--color-green-500);
  }
  .text-md-green-600 {
    color: var(--color-green-600);
  }
  .text-md-green-700 {
    color: var(--color-green-700);
  }
  .text-md-green-800 {
    color: var(--color-green-800);
  }
  .text-md-green-900 {
    color: var(--color-green-900);
  }
  .text-md-green-100 {
    color: var(--color-green-100);
  }
  .text-md-green-200 {
    color: var(--color-green-200);
  }
  .text-md-green-300 {
    color: var(--color-green-300);
  }
  .text-md-green-400 {
    color: var(--color-green-400);
  }
  .text-md-lime-500 {
    color: var(--color-lime-500);
  }
  .text-md-lime-600 {
    color: var(--color-lime-600);
  }
  .text-md-lime-700 {
    color: var(--color-lime-700);
  }
  .text-md-lime-800 {
    color: var(--color-lime-800);
  }
  .text-md-lime-900 {
    color: var(--color-lime-900);
  }
  .text-md-lime-100 {
    color: var(--color-lime-100);
  }
  .text-md-lime-200 {
    color: var(--color-lime-200);
  }
  .text-md-lime-300 {
    color: var(--color-lime-300);
  }
  .text-md-lime-400 {
    color: var(--color-lime-400);
  }
}
@media only screen and (min-width: 1024px) {
  .text-lg-foreground {
    color: var(--color-foreground);
  }
  .text-lg-background {
    color: var(--color-background);
  }
  .text-lg-black {
    color: var(--color-black);
  }
  .text-lg-white {
    color: var(--color-white);
  }
  .text-lg-primary {
    color: var(--color-primary);
  }
  .text-lg-gray-500 {
    color: var(--color-gray-500);
  }
  .text-lg-gray-600 {
    color: var(--color-gray-600);
  }
  .text-lg-gray-700 {
    color: var(--color-gray-700);
  }
  .text-lg-gray-800 {
    color: var(--color-gray-800);
  }
  .text-lg-gray-900 {
    color: var(--color-gray-900);
  }
  .text-lg-gray-100 {
    color: var(--color-gray-100);
  }
  .text-lg-gray-200 {
    color: var(--color-gray-200);
  }
  .text-lg-gray-300 {
    color: var(--color-gray-300);
  }
  .text-lg-gray-400 {
    color: var(--color-gray-400);
  }
  .text-lg-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-lg-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-lg-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-lg-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-lg-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-lg-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-lg-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-lg-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-lg-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-lg-orange-500 {
    color: var(--color-orange-500);
  }
  .text-lg-orange-600 {
    color: var(--color-orange-600);
  }
  .text-lg-orange-700 {
    color: var(--color-orange-700);
  }
  .text-lg-orange-800 {
    color: var(--color-orange-800);
  }
  .text-lg-orange-900 {
    color: var(--color-orange-900);
  }
  .text-lg-orange-100 {
    color: var(--color-orange-100);
  }
  .text-lg-orange-200 {
    color: var(--color-orange-200);
  }
  .text-lg-orange-300 {
    color: var(--color-orange-300);
  }
  .text-lg-orange-400 {
    color: var(--color-orange-400);
  }
  .text-lg-red-500 {
    color: var(--color-red-500);
  }
  .text-lg-red-600 {
    color: var(--color-red-600);
  }
  .text-lg-red-700 {
    color: var(--color-red-700);
  }
  .text-lg-red-800 {
    color: var(--color-red-800);
  }
  .text-lg-red-900 {
    color: var(--color-red-900);
  }
  .text-lg-red-100 {
    color: var(--color-red-100);
  }
  .text-lg-red-200 {
    color: var(--color-red-200);
  }
  .text-lg-red-300 {
    color: var(--color-red-300);
  }
  .text-lg-red-400 {
    color: var(--color-red-400);
  }
  .text-lg-violet-500 {
    color: var(--color-violet-500);
  }
  .text-lg-violet-600 {
    color: var(--color-violet-600);
  }
  .text-lg-violet-700 {
    color: var(--color-violet-700);
  }
  .text-lg-violet-800 {
    color: var(--color-violet-800);
  }
  .text-lg-violet-900 {
    color: var(--color-violet-900);
  }
  .text-lg-violet-100 {
    color: var(--color-violet-100);
  }
  .text-lg-violet-200 {
    color: var(--color-violet-200);
  }
  .text-lg-violet-300 {
    color: var(--color-violet-300);
  }
  .text-lg-violet-400 {
    color: var(--color-violet-400);
  }
  .text-lg-purple-500 {
    color: var(--color-purple-500);
  }
  .text-lg-purple-600 {
    color: var(--color-purple-600);
  }
  .text-lg-purple-700 {
    color: var(--color-purple-700);
  }
  .text-lg-purple-800 {
    color: var(--color-purple-800);
  }
  .text-lg-purple-900 {
    color: var(--color-purple-900);
  }
  .text-lg-purple-100 {
    color: var(--color-purple-100);
  }
  .text-lg-purple-200 {
    color: var(--color-purple-200);
  }
  .text-lg-purple-300 {
    color: var(--color-purple-300);
  }
  .text-lg-purple-400 {
    color: var(--color-purple-400);
  }
  .text-lg-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-lg-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-lg-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-lg-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-lg-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-lg-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-lg-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-lg-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-lg-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-lg-blue-500 {
    color: var(--color-blue-500);
  }
  .text-lg-blue-600 {
    color: var(--color-blue-600);
  }
  .text-lg-blue-700 {
    color: var(--color-blue-700);
  }
  .text-lg-blue-800 {
    color: var(--color-blue-800);
  }
  .text-lg-blue-900 {
    color: var(--color-blue-900);
  }
  .text-lg-blue-100 {
    color: var(--color-blue-100);
  }
  .text-lg-blue-200 {
    color: var(--color-blue-200);
  }
  .text-lg-blue-300 {
    color: var(--color-blue-300);
  }
  .text-lg-blue-400 {
    color: var(--color-blue-400);
  }
  .text-lg-teal-500 {
    color: var(--color-teal-500);
  }
  .text-lg-teal-600 {
    color: var(--color-teal-600);
  }
  .text-lg-teal-700 {
    color: var(--color-teal-700);
  }
  .text-lg-teal-800 {
    color: var(--color-teal-800);
  }
  .text-lg-teal-900 {
    color: var(--color-teal-900);
  }
  .text-lg-teal-100 {
    color: var(--color-teal-100);
  }
  .text-lg-teal-200 {
    color: var(--color-teal-200);
  }
  .text-lg-teal-300 {
    color: var(--color-teal-300);
  }
  .text-lg-teal-400 {
    color: var(--color-teal-400);
  }
  .text-lg-green-500 {
    color: var(--color-green-500);
  }
  .text-lg-green-600 {
    color: var(--color-green-600);
  }
  .text-lg-green-700 {
    color: var(--color-green-700);
  }
  .text-lg-green-800 {
    color: var(--color-green-800);
  }
  .text-lg-green-900 {
    color: var(--color-green-900);
  }
  .text-lg-green-100 {
    color: var(--color-green-100);
  }
  .text-lg-green-200 {
    color: var(--color-green-200);
  }
  .text-lg-green-300 {
    color: var(--color-green-300);
  }
  .text-lg-green-400 {
    color: var(--color-green-400);
  }
  .text-lg-lime-500 {
    color: var(--color-lime-500);
  }
  .text-lg-lime-600 {
    color: var(--color-lime-600);
  }
  .text-lg-lime-700 {
    color: var(--color-lime-700);
  }
  .text-lg-lime-800 {
    color: var(--color-lime-800);
  }
  .text-lg-lime-900 {
    color: var(--color-lime-900);
  }
  .text-lg-lime-100 {
    color: var(--color-lime-100);
  }
  .text-lg-lime-200 {
    color: var(--color-lime-200);
  }
  .text-lg-lime-300 {
    color: var(--color-lime-300);
  }
  .text-lg-lime-400 {
    color: var(--color-lime-400);
  }
}
@media only screen and (min-width: 1366px) {
  .text-xl-foreground {
    color: var(--color-foreground);
  }
  .text-xl-background {
    color: var(--color-background);
  }
  .text-xl-black {
    color: var(--color-black);
  }
  .text-xl-white {
    color: var(--color-white);
  }
  .text-xl-primary {
    color: var(--color-primary);
  }
  .text-xl-gray-500 {
    color: var(--color-gray-500);
  }
  .text-xl-gray-600 {
    color: var(--color-gray-600);
  }
  .text-xl-gray-700 {
    color: var(--color-gray-700);
  }
  .text-xl-gray-800 {
    color: var(--color-gray-800);
  }
  .text-xl-gray-900 {
    color: var(--color-gray-900);
  }
  .text-xl-gray-100 {
    color: var(--color-gray-100);
  }
  .text-xl-gray-200 {
    color: var(--color-gray-200);
  }
  .text-xl-gray-300 {
    color: var(--color-gray-300);
  }
  .text-xl-gray-400 {
    color: var(--color-gray-400);
  }
  .text-xl-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-xl-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-xl-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-xl-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-xl-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-xl-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-xl-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-xl-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-xl-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-xl-orange-500 {
    color: var(--color-orange-500);
  }
  .text-xl-orange-600 {
    color: var(--color-orange-600);
  }
  .text-xl-orange-700 {
    color: var(--color-orange-700);
  }
  .text-xl-orange-800 {
    color: var(--color-orange-800);
  }
  .text-xl-orange-900 {
    color: var(--color-orange-900);
  }
  .text-xl-orange-100 {
    color: var(--color-orange-100);
  }
  .text-xl-orange-200 {
    color: var(--color-orange-200);
  }
  .text-xl-orange-300 {
    color: var(--color-orange-300);
  }
  .text-xl-orange-400 {
    color: var(--color-orange-400);
  }
  .text-xl-red-500 {
    color: var(--color-red-500);
  }
  .text-xl-red-600 {
    color: var(--color-red-600);
  }
  .text-xl-red-700 {
    color: var(--color-red-700);
  }
  .text-xl-red-800 {
    color: var(--color-red-800);
  }
  .text-xl-red-900 {
    color: var(--color-red-900);
  }
  .text-xl-red-100 {
    color: var(--color-red-100);
  }
  .text-xl-red-200 {
    color: var(--color-red-200);
  }
  .text-xl-red-300 {
    color: var(--color-red-300);
  }
  .text-xl-red-400 {
    color: var(--color-red-400);
  }
  .text-xl-violet-500 {
    color: var(--color-violet-500);
  }
  .text-xl-violet-600 {
    color: var(--color-violet-600);
  }
  .text-xl-violet-700 {
    color: var(--color-violet-700);
  }
  .text-xl-violet-800 {
    color: var(--color-violet-800);
  }
  .text-xl-violet-900 {
    color: var(--color-violet-900);
  }
  .text-xl-violet-100 {
    color: var(--color-violet-100);
  }
  .text-xl-violet-200 {
    color: var(--color-violet-200);
  }
  .text-xl-violet-300 {
    color: var(--color-violet-300);
  }
  .text-xl-violet-400 {
    color: var(--color-violet-400);
  }
  .text-xl-purple-500 {
    color: var(--color-purple-500);
  }
  .text-xl-purple-600 {
    color: var(--color-purple-600);
  }
  .text-xl-purple-700 {
    color: var(--color-purple-700);
  }
  .text-xl-purple-800 {
    color: var(--color-purple-800);
  }
  .text-xl-purple-900 {
    color: var(--color-purple-900);
  }
  .text-xl-purple-100 {
    color: var(--color-purple-100);
  }
  .text-xl-purple-200 {
    color: var(--color-purple-200);
  }
  .text-xl-purple-300 {
    color: var(--color-purple-300);
  }
  .text-xl-purple-400 {
    color: var(--color-purple-400);
  }
  .text-xl-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-xl-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-xl-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-xl-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-xl-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-xl-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-xl-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-xl-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-xl-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-xl-blue-500 {
    color: var(--color-blue-500);
  }
  .text-xl-blue-600 {
    color: var(--color-blue-600);
  }
  .text-xl-blue-700 {
    color: var(--color-blue-700);
  }
  .text-xl-blue-800 {
    color: var(--color-blue-800);
  }
  .text-xl-blue-900 {
    color: var(--color-blue-900);
  }
  .text-xl-blue-100 {
    color: var(--color-blue-100);
  }
  .text-xl-blue-200 {
    color: var(--color-blue-200);
  }
  .text-xl-blue-300 {
    color: var(--color-blue-300);
  }
  .text-xl-blue-400 {
    color: var(--color-blue-400);
  }
  .text-xl-teal-500 {
    color: var(--color-teal-500);
  }
  .text-xl-teal-600 {
    color: var(--color-teal-600);
  }
  .text-xl-teal-700 {
    color: var(--color-teal-700);
  }
  .text-xl-teal-800 {
    color: var(--color-teal-800);
  }
  .text-xl-teal-900 {
    color: var(--color-teal-900);
  }
  .text-xl-teal-100 {
    color: var(--color-teal-100);
  }
  .text-xl-teal-200 {
    color: var(--color-teal-200);
  }
  .text-xl-teal-300 {
    color: var(--color-teal-300);
  }
  .text-xl-teal-400 {
    color: var(--color-teal-400);
  }
  .text-xl-green-500 {
    color: var(--color-green-500);
  }
  .text-xl-green-600 {
    color: var(--color-green-600);
  }
  .text-xl-green-700 {
    color: var(--color-green-700);
  }
  .text-xl-green-800 {
    color: var(--color-green-800);
  }
  .text-xl-green-900 {
    color: var(--color-green-900);
  }
  .text-xl-green-100 {
    color: var(--color-green-100);
  }
  .text-xl-green-200 {
    color: var(--color-green-200);
  }
  .text-xl-green-300 {
    color: var(--color-green-300);
  }
  .text-xl-green-400 {
    color: var(--color-green-400);
  }
  .text-xl-lime-500 {
    color: var(--color-lime-500);
  }
  .text-xl-lime-600 {
    color: var(--color-lime-600);
  }
  .text-xl-lime-700 {
    color: var(--color-lime-700);
  }
  .text-xl-lime-800 {
    color: var(--color-lime-800);
  }
  .text-xl-lime-900 {
    color: var(--color-lime-900);
  }
  .text-xl-lime-100 {
    color: var(--color-lime-100);
  }
  .text-xl-lime-200 {
    color: var(--color-lime-200);
  }
  .text-xl-lime-300 {
    color: var(--color-lime-300);
  }
  .text-xl-lime-400 {
    color: var(--color-lime-400);
  }
}
@media only screen and (min-width: 1680px) {
  .text-xxl-foreground {
    color: var(--color-foreground);
  }
  .text-xxl-background {
    color: var(--color-background);
  }
  .text-xxl-black {
    color: var(--color-black);
  }
  .text-xxl-white {
    color: var(--color-white);
  }
  .text-xxl-primary {
    color: var(--color-primary);
  }
  .text-xxl-gray-500 {
    color: var(--color-gray-500);
  }
  .text-xxl-gray-600 {
    color: var(--color-gray-600);
  }
  .text-xxl-gray-700 {
    color: var(--color-gray-700);
  }
  .text-xxl-gray-800 {
    color: var(--color-gray-800);
  }
  .text-xxl-gray-900 {
    color: var(--color-gray-900);
  }
  .text-xxl-gray-100 {
    color: var(--color-gray-100);
  }
  .text-xxl-gray-200 {
    color: var(--color-gray-200);
  }
  .text-xxl-gray-300 {
    color: var(--color-gray-300);
  }
  .text-xxl-gray-400 {
    color: var(--color-gray-400);
  }
  .text-xxl-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-xxl-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-xxl-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-xxl-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-xxl-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-xxl-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-xxl-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-xxl-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-xxl-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-xxl-orange-500 {
    color: var(--color-orange-500);
  }
  .text-xxl-orange-600 {
    color: var(--color-orange-600);
  }
  .text-xxl-orange-700 {
    color: var(--color-orange-700);
  }
  .text-xxl-orange-800 {
    color: var(--color-orange-800);
  }
  .text-xxl-orange-900 {
    color: var(--color-orange-900);
  }
  .text-xxl-orange-100 {
    color: var(--color-orange-100);
  }
  .text-xxl-orange-200 {
    color: var(--color-orange-200);
  }
  .text-xxl-orange-300 {
    color: var(--color-orange-300);
  }
  .text-xxl-orange-400 {
    color: var(--color-orange-400);
  }
  .text-xxl-red-500 {
    color: var(--color-red-500);
  }
  .text-xxl-red-600 {
    color: var(--color-red-600);
  }
  .text-xxl-red-700 {
    color: var(--color-red-700);
  }
  .text-xxl-red-800 {
    color: var(--color-red-800);
  }
  .text-xxl-red-900 {
    color: var(--color-red-900);
  }
  .text-xxl-red-100 {
    color: var(--color-red-100);
  }
  .text-xxl-red-200 {
    color: var(--color-red-200);
  }
  .text-xxl-red-300 {
    color: var(--color-red-300);
  }
  .text-xxl-red-400 {
    color: var(--color-red-400);
  }
  .text-xxl-violet-500 {
    color: var(--color-violet-500);
  }
  .text-xxl-violet-600 {
    color: var(--color-violet-600);
  }
  .text-xxl-violet-700 {
    color: var(--color-violet-700);
  }
  .text-xxl-violet-800 {
    color: var(--color-violet-800);
  }
  .text-xxl-violet-900 {
    color: var(--color-violet-900);
  }
  .text-xxl-violet-100 {
    color: var(--color-violet-100);
  }
  .text-xxl-violet-200 {
    color: var(--color-violet-200);
  }
  .text-xxl-violet-300 {
    color: var(--color-violet-300);
  }
  .text-xxl-violet-400 {
    color: var(--color-violet-400);
  }
  .text-xxl-purple-500 {
    color: var(--color-purple-500);
  }
  .text-xxl-purple-600 {
    color: var(--color-purple-600);
  }
  .text-xxl-purple-700 {
    color: var(--color-purple-700);
  }
  .text-xxl-purple-800 {
    color: var(--color-purple-800);
  }
  .text-xxl-purple-900 {
    color: var(--color-purple-900);
  }
  .text-xxl-purple-100 {
    color: var(--color-purple-100);
  }
  .text-xxl-purple-200 {
    color: var(--color-purple-200);
  }
  .text-xxl-purple-300 {
    color: var(--color-purple-300);
  }
  .text-xxl-purple-400 {
    color: var(--color-purple-400);
  }
  .text-xxl-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-xxl-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-xxl-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-xxl-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-xxl-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-xxl-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-xxl-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-xxl-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-xxl-indigo-400 {
    color: var(--color-in