/* Utilities */
/* Utility classes for margin, padding, text alignment, display, and visibility. */

/* Typography */
/* Font Family */
.ff-ibarra {
  font-family: var(--font-ibarra);
  font-feature-settings: var(--font-feature-settings);
  font-variant-ligatures: var(--font-variant-ligatures);
}

.ff-lora {
  font-family: var(--font-lora);
  font-variant-ligatures: var(--font-variant-ligatures);
}

.ff-raleway {
  font-family: var(--font-raleway);
}

.fw-200 {
  font-weight: 200;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: bold;
}

.fstyle-italic {
  font-style: italic;
}

.flex {
  display: flex;
  column-gap: 2em;
}

.underline-colored {
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-decoration-style: wavy;
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
}

.inline-icon {
  vertical-align: top;
  display: inline-block;
  max-height: 1.5em;
}
/* Font Size */
.fs-xs {
  font-size: var(--font-size-xs);
}
.fs-s {
  font-size: var(--font-size-s);
}
.fs-base {
  font-size: var(--font-size-base);
}
.fs-l {
  font-size: var(--font-size-l);
}
.fs-xl {
  font-size: var(--font-size-xl);
}
.fs-xxl {
  font-size: var(--font-size-xxl);
}

/* Text-alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.row-reverse {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

/* Colors */
/* Primary Colors */
div .bg-primary,
.bg-primary {
  background-color: var(--color-primary);
}
.bg-primary-darkest {
  background-color: var(--color-primary-darkest);
}
.bg-primary-darker {
  background-color: var(--color-primary-darker);
}
div .bg-primary-lighter,
.bg-primary-lighter {
  background-color: var(--color-primary-lighter);
}
.bg-primary-lightest {
  background-color: var(--color-primary-lightest);
}

/* Secondary Colors */
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-secondary-darkest {
  background-color: var(--color-secondary-darkest);
}
.bg-secondary-darker {
  background-color: var(--color-secondary-darker);
}
.bg-secondary-lighter {
  background-color: var(--color-secondary-lighter);
}
.bg-secondary-lightest {
  background-color: var(--color-secondary-lightest);
}

/* Accent Colors */
.bg-accent {
  background-color: var(--color-accent);
}
.bg-accent-darkest {
  background-color: var(--color-accent-darkest);
}
.bg-accent-darker {
  background-color: var(--color-accent-darker);
}
.bg-accent-lighter {
  background-color: var(--color-accent-lighter);
}
.bg-accent-lightest {
  background-color: var(--color-accent-lightest);
}

/* Background Colors */
div .bg-background,
.bg-background {
  background-color: var(--color-background);
}
.bg-background-darkest {
  background-color: var(--color-background-darkest);
}
.bg-background-darker {
  background-color: var(--color-background-darker);
}
.bg-background-lighter {
  background-color: var(--color-background-lighter);
}

/* Text Colors */

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

/* Additional Colors */
.color-secondary {
  color: var(--color-secondary);
}

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

.center {
  margin: auto;
}

.padding-top-bottom-1em {
  padding: 1em 0;
}

div .padding-top-bottom-2em,
.padding-top-bottom-2em {
  padding: 2em 0;
}

.padding-bottom-1em {
  padding-bottom: 1em;
}

.padding-bottom-2em {
  padding-bottom: 2em;
}

.margin-top-1em {
  margin-top: 1em;
}

.pre-line {
  white-space: pre-line;
  max-width: 65em;
}