/* *********************** */
/*        TYPOGRAPHY       */
/* *********************** */
/* Font Colors, Weights, Styles, Alignment, Decoration */

/* Font Colors */
.fc-r  { color: var(--red); }
.fc-a  { color: var(--amber); }
.fc-g  { color: var(--green); }
.fc-ac { color: var(--accent); }
.fc-bll  { color: var(--blue-light); }
.fc-bld  { color: var(--blue-dark); }
.fc-bk  { color: var(--black); }
.fc-di { color: var(--darkist-grey); }
.fc-dr { color: var(--darker-grey); }
.fc-d  { color: var(--dark-grey); }
.fc-m  { color: var(--medium-grey); }
.fc-l  { color: var(--light-grey); }
.fc-w  { color: var(--white); }

/* Font Weight */
.fw-l  { font-weight: var(--light); }
.fw-m  { font-weight: var(--medium); }
.fw-b  { font-weight: var(--bold); }

/* Font Style */
.fst-n { font-style: normal; }
.fst-i { font-style: italic; }

/* Body Text Spacing */
.fsp-sm { line-height: var(--lh-body-sm); letter-spacing: var(--ls-body-sm); }
.fsp-lg { line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); }

/* Text Transform */
.tt-u { text-transform: uppercase; }
.tt-c { text-transform: capitalize; }
.tt-l { text-transform: lowercase; }
.tt-n { text-transform: none; }

/* Text Alignment */
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

/* Text Decoration */
.td-u { text-decoration: underline; }
.td-n { text-decoration: none; }
.td-l { text-decoration: line-through; }

/* Headings */
.h1, .h2, .h3, .h4, .h5 {
  font-weight: var(--bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
}

/* Font-size */
.h1 { font-size: var(--fs-1); }
.h2 { font-size: var(--fs-2); }
.h3 { font-size: var(--fs-3); }
.h4 { font-size: var(--fs-4); }
.h5, .b1 { font-size: var(--fs-5); }
.b2 { font-size: var(--fs-6); }
.b3 { font-size: var(--fs-7); }
.b4 { font-size: var(--fs-8); }

/* *********************** */
/*     BACKGROUND COLORS   */
/* *********************** */
.bg-ac  { background-color: var(--accent); }
.bg-acl  { background-color: var(--accent-light); }
.bg-g   { background-color: var(--green); }
.bg-r   { background-color: var(--red); }
.bg-bll   { background-color: var(--blue-light); }
.bg-bk   { background-color: var(--black); }
.bg-di  { background-color: var(--darkist-grey); }
.bg-dr  { background-color: var(--darker-grey); }
.bg-d   { background-color: var(--dark-grey); }
.bg-m   { background-color: var(--medium-grey); }
.bg-l   { background-color: var(--light-grey); }
.bg-w   { background-color: var(--white); }

/* *********************** */
/*        SPACING          */
/* *********************** */

/* Margin Unique (top/bottom) */
.mt-xsm { margin-top: var(--xsm); }
.mb-xsm { margin-bottom: var(--xsm); }

/* Margin Block (top + bottom) */
.my-lg  { margin-block: var(--lg); }
.my-md  { margin-block: var(--md); }
.my-sm  { margin-block: var(--sm); }
.my-xsm { margin-block: var(--xsm); }

/* Margin Inline (left + right) */
.mx-lg  { margin-inline: var(--lg); }
.mx-md  { margin-inline: var(--md); }
.mx-sm  { margin-inline: var(--sm); }
.mx-xsm { margin-inline: var(--xsm); }

/* Margin Top / Bottom shortcuts */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Padding Block (top + bottom) */
.py-lg  { padding-block: var(--lg); }
.py-md  { padding-block: var(--md); }
.py-sm  { padding-block: var(--sm); }
.py-xsm { padding-block: var(--xsm); }

/* Padding Inline (left + right) */
.px-lg  { padding-inline: var(--lg); }
.px-md  { padding-inline: var(--md); }
.px-sm  { padding-inline: var(--sm); }
.px-xsm { padding-inline: var(--xsm); }

/* Flex gap */
.gap-xsm { gap: var(--xsm); }
.gap-sm  { gap: var(--sm); }
.gap-md  { gap: var(--md); }
.gap-lg  { gap: var(--lg); }

/* Responsive adjustments */
@media (max-width: 48rem) {
  .px-lg { padding-inline: calc(var(--lg) - 0.5rem); }
  .mx-lg { margin-inline: calc(var(--lg) - 0.5rem); }
}

/* *********************** */
/*       LAYOUT           */
/* *********************** */

/* Flex Container */
.f       { display: flex; }
.if      { display: inline-flex; }

/* Flex Direction */
.fd-r    { flex-direction: row; }
.fd-c    { flex-direction: column; }

/* Justify Content */
.jc-s    { justify-content: flex-start; }
.jc-e    { justify-content: flex-end; }
.jc-c    { justify-content: center; }
.jc-b    { justify-content: space-between; }

/* Align Items */
.ai-s    { align-items: flex-start; }
.ai-c    { align-items: center; }
.ai-e    { align-items: flex-end; }

/* Flex Grow / Flex 1 */
.f-1     { flex: 1; }
.fs-0    { flex-shrink: 0; }

/* *********************** */
/*       WIDTH UTILITY      */
/* *********************** */
.w-100 { width: 100%; }
.w-75 { width: 75%; }
.w-50 { width: 50%; }

/* *********************** */
/*     UTILITY CLASSES     */
/* *********************** */

/* Overflow & Visibility */
.oh      { overflow: hidden; }
.hidden  { visibility: hidden; opacity: 0; }
.none    { display: none}
.op-45   { opacity: 0.45; }
.op-65   { opacity: 0.65; }
.op-85   { opacity: 0.85; }

/* *********************** */
/*       POSITIONING       */
/* *********************** */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }

/* Desktop only */
@media (min-width: 48rem) {
  .pos-stk { position: sticky; }
}

/* *********************** */
/*        INSETS           */
/* *********************** */

/* Shortcuts for all sides / axes */
.i-0   { inset: 0; }
.ix-0  { inset-inline: 0; }
.iy-0  { inset-block: 0; }

/* Side-specific utilities */
.it-0  { top: 0; }
.it-04 { top: 0.4rem; }
.it-sm { top: var(--sm); }
.it-md { top: var(--md); }
.it-lg { top: var(--lg); }

.ib-0  { bottom: 0; }
.ib-sm { bottom: var(--sm); }
.ib-md { bottom: var(--md); }
.ib-lg { bottom: var(--lg); }

.il-0  { left: 0; }
.ir-0  { right: 0; }

/* *********************** */
/*       IMAGES            */
/* *********************** */

/* Square images (width = height) */
.img-12 { width: var(--img-12); height: var(--img-12); }
.img-16 { width: var(--img-16); height: var(--img-16); }
.img-18 { width: var(--img-18); height: var(--img-18); }
.img-24 { width: var(--img-24); height: var(--img-24); }
.img-28 { width: var(--img-28); height: var(--img-28); }
.img-32 { width: var(--img-32); height: var(--img-32); }
.img-48 { width: var(--img-48); height: var(--img-48); }
.img-64 { width: var(--img-64); height: var(--img-64); }

/* *********************** */
/*       BORDER RADIUS     */
/* *********************** */

/* Full radius */
.rd-sm  { border-radius: var(--sm); }
.rd-md  { border-radius: var(--md); }
.rd-lg  { border-radius: var(--lg); }
.rd-xlg { border-radius: var(--xlg); }

/* Top / bottom medium */
.rdt-md { border-radius: var(--md) var(--md) 0 0; }
.rdb-md { border-radius: 0 0 var(--md) var(--md); }

/* Left / right large */
.rdl-lg { border-radius: var(--lg) 0 0 var(--lg); }
.rdr-lg { border-radius: 0 var(--lg) var(--lg) 0; }

/* *********************** */
/*       BOX SHADOWS       */
/* *********************** */

/* Edge shadows */
.sdw-t  { box-shadow: inset 0 1px 0 0 var(--medium-grey); }
.sdw-b  { box-shadow: inset 0 -1px 0 0 var(--light-grey); }
.sdw-bm { box-shadow: inset 0 -0.5px 0 0 var(--medium-grey); }

/* Item / container shadows */
.sdw-item { box-shadow: 0 5px 10px -5px var(--dark-grey); }
.sdw-cont { box-shadow: 0 5px 15px 0 var(--medium-grey); }


.sdw-btn {
  box-shadow: 0 2px 4px -2px var(--dark-grey);
}


/* Outline / border */
.sdw-ol { border: 1px solid var(--medium-grey); }
.sdw-olr { border-right: 1px solid var(--medium-grey); }