sulphuris/dist/sulphuris.css

An adaptable CSS utility library

/* sulphuris v2.0.1 | http://sulphuris.github.io | MIT License */
/* stylelint-disable */
/*
 * 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)
 */
/*
 * 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 */
/*
 * 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 */
.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: rgb(112, 112, 113.6);
  --color-gray-700: rgb(84, 84, 85.2);
  --color-gray-800: rgb(56, 56, 56.8);
  --color-gray-900: rgb(28, 28, 28.4);
  --color-gray-100: rgb(232, 232, 232.4);
  --color-gray-200: rgb(209, 209, 209.8);
  --color-gray-300: rgb(186, 186, 187.2);
  --color-gray-400: rgb(163, 163, 164.6);
  --color-yellow-500: #f6c026;
  --color-yellow-600: rgb(196.8, 153.6, 30.4);
  --color-yellow-700: rgb(147.6, 115.2, 22.8);
  --color-yellow-800: rgb(98.4, 76.8, 15.2);
  --color-yellow-900: rgb(49.2, 38.4, 7.6);
  --color-yellow-100: rgb(253.2, 242.4, 211.6);
  --color-yellow-200: rgb(251.4, 229.8, 168.2);
  --color-yellow-300: rgb(249.6, 217.2, 124.8);
  --color-yellow-400: rgb(247.8, 204.6, 81.4);
  --color-orange-500: #F4912A;
  --color-orange-600: rgb(195.2, 116, 33.6);
  --color-orange-700: rgb(146.4, 87, 25.2);
  --color-orange-800: rgb(97.6, 58, 16.8);
  --color-orange-900: rgb(48.8, 29, 8.4);
  --color-orange-100: rgb(252.8, 233, 212.4);
  --color-orange-200: rgb(250.6, 211, 169.8);
  --color-orange-300: rgb(248.4, 189, 127.2);
  --color-orange-400: rgb(246.2, 167, 84.6);
  --color-red-500: #E41328;
  --color-red-600: rgb(182.4, 15.2, 32);
  --color-red-700: rgb(136.8, 11.4, 24);
  --color-red-800: rgb(91.2, 7.6, 16);
  --color-red-900: rgb(45.6, 3.8, 8);
  --color-red-100: rgb(249.6, 207.8, 212);
  --color-red-200: rgb(244.2, 160.6, 169);
  --color-red-300: rgb(238.8, 113.4, 126);
  --color-red-400: rgb(233.4, 66.2, 83);
  --color-violet-500: #752A6F;
  --color-violet-600: rgb(93.6, 33.6, 88.8);
  --color-violet-700: rgb(70.2, 25.2, 66.6);
  --color-violet-800: rgb(46.8, 16.8, 44.4);
  --color-violet-900: rgb(23.4, 8.4, 22.2);
  --color-violet-100: rgb(227.4, 212.4, 226.2);
  --color-violet-200: rgb(199.8, 169.8, 197.4);
  --color-violet-300: rgb(172.2, 127.2, 168.6);
  --color-violet-400: rgb(144.6, 84.6, 139.8);
  --color-purple-500: #472573;
  --color-purple-600: rgb(56.8, 29.6, 92);
  --color-purple-700: rgb(42.6, 22.2, 69);
  --color-purple-800: rgb(28.4, 14.8, 46);
  --color-purple-900: rgb(14.2, 7.4, 23);
  --color-purple-100: rgb(218.2, 211.4, 227);
  --color-purple-200: rgb(181.4, 167.8, 199);
  --color-purple-300: rgb(144.6, 124.2, 171);
  --color-purple-400: rgb(107.8, 80.6, 143);
  --color-indigo-500: #3F00FF;
  --color-indigo-600: rgb(50.4, 0, 204);
  --color-indigo-700: rgb(37.8, 0, 153);
  --color-indigo-800: rgb(25.2, 0, 102);
  --color-indigo-900: rgb(12.6, 0, 51);
  --color-indigo-100: rgb(216.6, 204, 255);
  --color-indigo-200: rgb(178.2, 153, 255);
  --color-indigo-300: rgb(139.8, 102, 255);
  --color-indigo-400: rgb(101.4, 51, 255);
  --color-blue-500: #0F4EB3;
  --color-blue-600: rgb(12, 62.4, 143.2);
  --color-blue-700: rgb(9, 46.8, 107.4);
  --color-blue-800: rgb(6, 31.2, 71.6);
  --color-blue-900: rgb(3, 15.6, 35.8);
  --color-blue-100: rgb(207, 219.6, 239.8);
  --color-blue-200: rgb(159, 184.2, 224.6);
  --color-blue-300: rgb(111, 148.8, 209.4);
  --color-blue-400: rgb(63, 113.4, 194.2);
  --color-teal-500: #00A4A4;
  --color-teal-600: rgb(0, 131.2, 131.2);
  --color-teal-700: rgb(0, 98.4, 98.4);
  --color-teal-800: rgb(0, 65.6, 65.6);
  --color-teal-900: rgb(0, 32.8, 32.8);
  --color-teal-100: rgb(204, 236.8, 236.8);
  --color-teal-200: rgb(153, 218.6, 218.6);
  --color-teal-300: rgb(102, 200.4, 200.4);
  --color-teal-400: rgb(51, 182.2, 182.2);
  --color-green-500: #10AF2E;
  --color-green-600: rgb(12.8, 140, 36.8);
  --color-green-700: rgb(9.6, 105, 27.6);
  --color-green-800: rgb(6.4, 70, 18.4);
  --color-green-900: rgb(3.2, 35, 9.2);
  --color-green-100: rgb(207.2, 239, 213.2);
  --color-green-200: rgb(159.4, 223, 171.4);
  --color-green-300: rgb(111.6, 207, 129.6);
  --color-green-400: rgb(63.8, 191, 87.8);
  --color-lime-500: #A4C400;
  --color-lime-600: rgb(131.2, 156.8, 0);
  --color-lime-700: rgb(98.4, 117.6, 0);
  --color-lime-800: rgb(65.6, 78.4, 0);
  --color-lime-900: rgb(32.8, 39.2, 0);
  --color-lime-100: rgb(236.8, 243.2, 204);
  --color-lime-200: rgb(218.6, 231.4, 153);
  --color-lime-300: rgb(200.4, 219.6, 102);
  --color-lime-400: rgb(182.2, 207.8, 51);
}

.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-indigo-400);
  }
  .text-xxl-blue-500 {
    color: var(--color-blue-500);
  }
  .text-xxl-blue-600 {
    color: var(--color-blue-600);
  }
  .text-xxl-blue