/* font family utilities */
.font-inherit { font-family: inherit; }
.font-sans { font-family: var(--font-family-sans); }
.font-mono { font-family: var(--font-family-mono); }

/* text size utilities */
.text-6 { font-size: var(--font-size-6); }
.text-5 { font-size: var(--font-size-5); }
.text-4 { font-size: var(--font-size-4); }
.text-3 { font-size: var(--font-size-3); }
.text-2 { font-size: var(--font-size-2); }
.text-1 { font-size: var(--font-size-1); }
.text-0 { font-size: var(--font-size-0); }

/* text align utilities */
.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }

/* font weight utilities */
.regular { font-weight: 400; }
.medium  { font-weight: 500; }
.bold    { font-weight: 700; }

/* line height */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

/* other text utilities */
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.capitalize { text-transform: capitalize; }
.nowrap { white-space: nowrap }
.break-word { word-wrap: break-word }

/* truncate text */
.truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* special text utilities */
.muted { opacity: 0.6; }
.small { font-size: var(--font-size-0); }

/* border radius */
.rounded { border-radius: var(--border-radius) }
.circle  { border-radius: 50% }
.not-rounded { border-radius: 0 }

/* borders */
.border { border: var(--border-width) solid var(--border-color); }
.border-top { border-top: var(--border-width) solid var(--border-color); }
.border-right { border-right: var(--border-width) solid var(--border-color); }
.border-bottom { border-bottom: var(--border-width) solid var(--border-color); }
.border-left { border-left: var(--border-width) solid var(--border-color); }
.border-none { border: 0; }

/* text color utilities */
.white   { color: var(--white); }
.black   { color: var(--black); }
.dark-1  { color: var(--dark-1); }
.dark-2  { color: var(--dark-2); }
.dark-3  { color: var(--dark-3); }
.dark-4  { color: var(--dark-4); }
.light-1 { color: var(--light-1); }
.light-2 { color: var(--light-2); }
.light-3 { color: var(--light-3); }
.red     { color: var(--red); }
.orange  { color: var(--orange); }
.yellow  { color: var(--yellow); }
.green   { color: var(--green); }
.blue    { color: var(--blue); }
.purple  { color: var(--purple); }

/* special color utilities */
.inherit { color: inherit; }
.transparent { color: transparent; }

/* background color utilities */
.bg-white   { background-color: var(--white); }
.bg-black   { background-color: var(--black); }
.bg-dark-1  { background-color: var(--dark-1); }
.bg-dark-2  { background-color: var(--dark-2); }
.bg-dark-3  { background-color: var(--dark-3); }
.bg-dark-4  { background-color: var(--dark-4); }
.bg-light-1 { background-color: var(--light-1); }
.bg-light-2 { background-color: var(--light-2); }
.bg-light-3 { background-color: var(--light-3); }
.bg-red     { background-color: var(--red); }
.bg-orange  { background-color: var(--orange); }
.bg-yellow  { background-color: var(--yellow); }
.bg-green   { background-color: var(--green); }
.bg-blue    { background-color: var(--blue); }
.bg-purple  { background-color: var(--purple); }

/* special background color utilities */
.bg-inherit { background-color: inherit; }
.bg-transparent { background-color: transparent; }

/* box shadow */
.shadow { box-shadow: var(--shadow); }
.shadow-none { box-shadow: none; }

/* margin utilities */
.m-0    { margin: 0; }
.m-auto { margin: auto; }
.m-1    { margin: var(--space-1); }
.m-2    { margin: var(--space-2); }
.m-3    { margin: var(--space-3); }
.m-4    { margin: var(--space-4); }
.m-5    { margin: var(--space-5); }
.m-6    { margin: var(--space-6); }

.mx-0    { margin-left: 0; margin-right: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1    { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2    { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3    { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4    { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5    { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6    { margin-left: var(--space-6); margin-right: var(--space-6); }

.mx-n1    { margin-left: calc(-1 * var(--space-1)); margin-right: calc(-1 * var(--space-1)); }
.mx-n2    { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
.mx-n3    { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); }
.mx-n4    { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
.mx-n5    { margin-left: calc(-1 * var(--space-5)); margin-right: calc(-1 * var(--space-5)); }
.mx-n6    { margin-left: calc(-1 * var(--space-6)); margin-right: calc(-1 * var(--space-6)); }

.mt-0    { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mt-1    { margin-top: var(--space-1); }
.mt-2    { margin-top: var(--space-2); }
.mt-3    { margin-top: var(--space-3); }
.mt-4    { margin-top: var(--space-4); }
.mt-5    { margin-top: var(--space-5); }
.mt-6    { margin-top: var(--space-6); }

.mr-0    { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-1    { margin-right: var(--space-1); }
.mr-2    { margin-right: var(--space-2); }
.mr-3    { margin-right: var(--space-3); }
.mr-4    { margin-right: var(--space-4); }
.mr-5    { margin-right: var(--space-5); }
.mr-6    { margin-right: var(--space-6); }

.mb-0    { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }
.mb-1    { margin-bottom: var(--space-1); }
.mb-2    { margin-bottom: var(--space-2); }
.mb-3    { margin-bottom: var(--space-3); }
.mb-4    { margin-bottom: var(--space-4); }
.mb-5    { margin-bottom: var(--space-5); }
.mb-6    { margin-bottom: var(--space-6); }

.ml-0    { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-1    { margin-left: var(--space-1); }
.ml-2    { margin-left: var(--space-2); }
.ml-3    { margin-left: var(--space-3); }
.ml-4    { margin-left: var(--space-4); }
.ml-5    { margin-left: var(--space-5); }
.ml-6    { margin-left: var(--space-6); }

/* padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

/* layout utilities */
.fit { width: 100%; }

/* display utilities */
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }

/* overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto   { overflow: auto; }

/* flex utilities */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-column  { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-center   { align-items: center; }
.flex-baseline { align-items: baseline; }
.flex-stretch  { align-items: stretch; }
.flex-start    { align-items: flex-start; }
.flex-end      { align-items: flex-end; }
.flex-justify  { justify-content: space-between; }
.flex-grow { flex: 1 0 auto; }
.flex-none { flex: none; }
.flex-auto {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.flex-first { order: -1; }
.flex-last  { order: 999; }

/* responsive flex utilities */
@media screen and (min-width: 40rem) {
    .sm-flex { display: flex; }
}
@media screen and (min-width: 48rem) {
    .md-flex { display: flex; }
}
@media screen and (min-width: 64rem) {
    .lg-flex { display: flex; }
}

/* position utilities */
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }