@layer utilities {
  /* -------------------------------------------------------------------------
     Text Utilities
     ------------------------------------------------------------------------- */
  .txt-xs {
    font-size: var(--text-xs);
  }
  .txt-sm {
    font-size: var(--text-sm);
  }
  .txt-base {
    font-size: var(--text-base);
  }
  .txt-lg {
    font-size: var(--text-lg);
  }
  .txt-xl {
    font-size: var(--text-xl);
  }
  .txt-2xl {
    font-size: var(--text-2xl);
  }
  .txt-3xl {
    font-size: var(--text-3xl);
  }

  .txt-subtle {
    color: var(--color-ink-subtle);
  }
  .txt-muted {
    color: var(--color-ink-muted);
  }
  .txt-link {
    color: var(--color-link);
  }
  .txt-positive {
    color: var(--color-positive);
  }
  .txt-negative {
    color: var(--color-negative);
  }

  .txt-center {
    text-align: center;
  }
  .txt-start {
    text-align: start;
  }
  .txt-end {
    text-align: end;
  }

  .txt-nowrap {
    white-space: nowrap;
  }
  .txt-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }
  .txt-mono {
    font-family: var(--font-mono);
  }

  .txt-bold {
    font-weight: 600;
  }
  .txt-normal {
    font-weight: 400;
  }

  /* -------------------------------------------------------------------------
     Spacing Utilities
     ------------------------------------------------------------------------- */

  /* Padding */
  .pad {
    padding: var(--block-space) var(--inline-space);
  }
  .pad-half {
    padding: var(--block-space-half) var(--inline-space-half);
  }
  .pad-double {
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .pad-block {
    padding-block: var(--block-space);
  }
  .pad-block-half {
    padding-block: var(--block-space-half);
  }
  .pad-block-double {
    padding-block: var(--block-space-double);
  }

  .pad-inline {
    padding-inline: var(--inline-space);
  }
  .pad-inline-half {
    padding-inline: var(--inline-space-half);
  }
  .pad-inline-double {
    padding-inline: var(--inline-space-double);
  }

  /* Margin */
  .margin-block {
    margin-block: var(--block-space);
  }
  .margin-block-half {
    margin-block: var(--block-space-half);
  }
  .margin-block-double {
    margin-block: var(--block-space-double);
  }

  .margin-block-start {
    margin-block-start: var(--block-space);
  }
  .margin-block-start-double {
    margin-block-start: var(--block-space-double);
  }
  .margin-block-end {
    margin-block-end: var(--block-space);
  }
  .margin-block-end-double {
    margin-block-end: var(--block-space-double);
  }

  .margin-inline {
    margin-inline: var(--inline-space);
  }
  .margin-inline-auto {
    margin-inline: auto;
  }

  /* -------------------------------------------------------------------------
     Flexbox Utilities
     ------------------------------------------------------------------------- */
  .flex {
    display: flex;
  }
  .flex-inline {
    display: inline-flex;
  }
  .flex-column {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .gap {
    column-gap: var(--inline-space);
    row-gap: var(--block-space);
  }
  .gap-half {
    column-gap: var(--inline-space-half);
    row-gap: var(--block-space-half);
  }
  .gap-double {
    column-gap: var(--inline-space-double);
    row-gap: var(--block-space-double);
  }

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

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

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

  /* -------------------------------------------------------------------------
     Display & Visibility
     ------------------------------------------------------------------------- */
  .block {
    display: block;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .hidden {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* -------------------------------------------------------------------------
     Width & Height
     ------------------------------------------------------------------------- */
  .w-full {
    inline-size: 100%;
  }
  .w-auto {
    inline-size: auto;
  }
  .h-full {
    block-size: 100%;
  }
  .h-auto {
    block-size: auto;
  }
  .max-w-full {
    max-inline-size: 100%;
  }

  /* -------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------- */
  .border {
    border: 1px solid var(--color-border);
  }
  .border-strong {
    border: 1px solid var(--color-border-strong);
  }
  .border-block-start {
    border-block-start: 1px solid var(--color-border);
  }
  .border-block-end {
    border-block-end: 1px solid var(--color-border);
  }
  .rounded {
    border-radius: var(--input-radius);
  }
  .rounded-lg {
    border-radius: var(--card-radius);
  }
  .rounded-full {
    border-radius: 99rem;
  }

  /* -------------------------------------------------------------------------
     Background
     ------------------------------------------------------------------------- */
  .fill-canvas {
    background-color: var(--color-canvas);
  }
  .fill-canvas-alt {
    background-color: var(--color-canvas-alt);
  }
  .fill-primary-light {
    background-color: var(--color-primary-light);
  }
  .fill-positive-light {
    background-color: var(--color-positive-light);
  }
  .fill-negative-light {
    background-color: var(--color-negative-light);
  }

  /* -------------------------------------------------------------------------
     Overflow
     ------------------------------------------------------------------------- */
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }

  /* -------------------------------------------------------------------------
     Cursor
     ------------------------------------------------------------------------- */
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }

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

  .inset-0 {
    inset: 0;
  }
}