/*  ==========================================================
    UTILITIES
    ========================================================== */

/**
 * A utility class is a class that only does one thing, but does it very well.
 * It is a single-responsibility class.
 * 
 * # What should utilities do?
 *   - Apply a single CSS property, or a concise group of related properties to create re-usable helpers
 *   - Extend design tokens to maintain a single source of truth
 *   - Abstract repeatability away from the CSS and apply it in the HTML instead
 *
 * # What shouldn’t utilities do?
 *   - Define a large group of unrelated CSS properties.
 *     For example, a utility that defined color, font-size and padding would make more sense to be a block.
 *   - Be used as a specificity hack. For example, setting all properties with !important
 *     will undoubtedly cause problems in the long-run.
 */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.relative {
  position: relative !important;
}

.h-screen {
  height: 100vh;
  block-size: 100vh;
  block-size: 100vb;
}

.h-full {
  height: 100%;
  block-size: 100%;
}

.h-75 {
  height: 75vh;
  block-size: 75vh;
  block-size: 75vb;
}

.h-50 {
  height: 50vh;
  block-size: 50vh;
  block-size: 50vb;
}

.w-full {
  width: 100%;
  inline-size: 100%;
}

.w-50 {
  width: 50%;
  inline-size: 50%;
}

.text-white {
  color: oklch(var(--color-light)) !important;
}

.text-dark {
  color: oklch(var(--color-dark)) !important;
}

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

.length-unset {
  max-inline-size: unset !important;
}

.link-visible {
  text-decoration: underline !important;
}

footer a {
  color: oklch(var(--color-light)) !important;
}

.success-text {
  color: oklch(var(--color-success)) !important;
}

.error-text {
  color: oklch(var(--color-error)) !important;
}

.font-ultra {
  font-size: var(--step-ultra);
}

.step-4 {
  font-size: var(--step-4);
}

.step-3 {
  font-size: var(--step-3);
}

.step-2 {
  font-size: var(--step-2);
}

.step-1 {
  font-size: var(--step-1);
}

.font-normal {
  font-size: var(--step-0) !important;
}

.font-small {
  font-size: var(--step--1) !important;
}

.font-xs {
  font-size: var(--step--2) !important;
}

.regular {
  font-weight: var(--fw-regular) !important;
}

.medium {
  font-weight: var(--fw-medium) !important;
}

.bold {
  font-weight: var(--fw-bold) !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.italic {
  font-style: italic;
}

.text-end {
  text-align: end !important;
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

p a {
  color: oklch(var(--color-primary)) !important;
  text-decoration: underline !important;
}

.has-icon-before i {
  margin-inline-end: 0.25em;
}

.has-icon-after i {
  margin-inline-start: 0.25em;
}

.list-styled li {
  list-style: inside;
}

.list-styled li::marker {
  content: "» ";
}

.list {
  display: list-item;
  list-style: square inside;
}

.list::marker {
  color: oklch(var(--color-primary));
}

.hidden {
  display: none !important;
}

.light-shadow {
  box-shadow: 0 0 10px oklch(var(--color-dark) / 0.25);
}

.bg-dark {
  background-color: oklch(var(--color-dark));
}