@layer utilities {
  /*

   * ======================
   * DISPLAY
   * ======================
   */
  .hidden { display: none; }
  .is-hidden { display: none !important; }
  .block { display: block; }
  .inline { display: inline; }
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }

  /*
   * ======================
   * FLEXBOX
   * ======================
   */
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1; }
  .flex-grow { flex-grow: 1; }
  .flex-shrink-0 { flex-shrink: 0; }

  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .items-end { align-items: flex-end; }

  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }

  .gap { gap: var(--block-space) var(--inline-space); }
  .gap-sm { gap: var(--block-space-sm) var(--inline-space-sm); }
  .gap-lg { gap: var(--block-space-lg) var(--inline-space-lg); }

  /*
   * ======================
   * TEXT
   * ======================
   */
  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-3xl { font-size: var(--text-3xl); }

  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }

  .text-left { text-align: start; }
  .text-center { text-align: center; }
  .text-right { text-align: end; }

  .leading-tight { line-height: 1.2; }
  .leading-normal { line-height: 1.5; }
  .leading-relaxed { line-height: 1.75; }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * ======================
   * COLORS
   * ======================
   */
  .text-ink { color: var(--color-ink); }
  .text-muted { color: var(--color-ink-muted); }
  .text-faint { color: var(--color-ink-faint); }
  .text-blue { color: var(--color-blue); }
  .text-green { color: var(--color-green); }
  .text-orange { color: var(--color-orange); }
  .text-red { color: var(--color-red); }
  .text-purple { color: var(--color-purple); }
  .text-yellow { color: var(--color-yellow); }

  .bg-canvas { background-color: var(--color-canvas); }
  .bg-canvas-alt { background-color: var(--color-canvas-alt); }
  .bg-blue { background-color: var(--color-blue); }
  .bg-green { background-color: var(--color-green); }
  .bg-orange { background-color: var(--color-orange); }
  .bg-red { background-color: var(--color-red); }

  /*
   * ======================
   * SPACING
   * ======================
   */
  /* Margin */
  .m-0 { margin: 0; }
  .m-auto { margin: auto; }
  .mx-auto { margin-inline: auto; }

  .mt { margin-block-start: var(--block-space); }
  .mt-sm { margin-block-start: var(--block-space-sm); }
  .mt-lg { margin-block-start: var(--block-space-lg); }

  .mb { margin-block-end: var(--block-space); }
  .mb-sm { margin-block-end: var(--block-space-sm); }
  .mb-lg { margin-block-end: var(--block-space-lg); }

  .ml { margin-inline-start: var(--inline-space); }
  .ml-sm { margin-inline-start: var(--inline-space-sm); }
  .ml-lg { margin-inline-start: var(--inline-space-lg); }

  .mr { margin-inline-end: var(--inline-space); }
  .mr-sm { margin-inline-end: var(--inline-space-sm); }
  .mr-lg { margin-inline-end: var(--inline-space-lg); }

  /* Padding */
  .p-0 { padding: 0; }
  .p { padding: var(--block-space) var(--inline-space); }
  .p-sm { padding: var(--block-space-sm) var(--inline-space-sm); }
  .p-lg { padding: var(--block-space-lg) var(--inline-space-lg); }

  .px { padding-inline: var(--inline-space); }
  .px-sm { padding-inline: var(--inline-space-sm); }
  .px-lg { padding-inline: var(--inline-space-lg); }

  .py { padding-block: var(--block-space); }
  .py-sm { padding-block: var(--block-space-sm); }
  .py-lg { padding-block: var(--block-space-lg); }

  /*
   * ======================
   * BORDERS
   * ======================
   */
  .border { border: 1px solid var(--color-border); }
  .border-t { border-block-start: 1px solid var(--color-border); }
  .border-b { border-block-end: 1px solid var(--color-border); }
  .border-l { border-inline-start: 1px solid var(--color-border); }
  .border-r { border-inline-end: 1px solid var(--color-border); }

  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-full { border-radius: var(--radius-full); }

  /*
   * ======================
   * WIDTH & HEIGHT
   * ======================
   */
  .w-full { inline-size: 100%; }
  .h-full { block-size: 100%; }
  .min-h-screen { min-block-size: 100dvh; }
  .max-w-content { max-inline-size: var(--content-max-width); }

  /*
   * ======================
   * ACCESSIBILITY
   * ======================
   */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .for-screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /*
   * ======================
   * RESPONSIVE
   * ======================
   */
  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }
}