@layer utilities {

    /* Text */
    .txt-xx-small {
        font-size: var(--text-xx-small);
    }

    .txt-x-small {
        font-size: var(--text-x-small);
    }

    .txt-small {
        font-size: var(--text-small);
    }

    .txt-normal {
        font-size: var(--text-normal);
    }

    .txt-medium {
        font-size: var(--text-medium);
    }

    .txt-large {
        font-size: var(--text-large);
    }

    .txt-x-large {
        font-size: var(--text-x-large);
    }

    .txt-xx-large {
        font-size: var(--text-xx-large);
    }

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

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

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

    .txt-current {
        color: currentColor;
    }

    .txt-ink {
        color: var(--color-ink);
    }

    .txt-reversed {
        color: var(--color-ink-inverted);
    }

    .txt-positive {
        color: var(--color-positive);
    }

    .txt-negative {
        color: var(--color-negative);
    }

    .txt-subtle {
        color: var(--color-ink-dark);
    }

    .txt-alert {
        color: var(--color-marker);
    }

    .txt-undecorated {
        text-decoration: none;
    }

    .txt-underline {
        text-decoration: underline;
    }

    .txt-tight-lines {
        line-height: 1.2;
    }

    .txt-nowrap {
        white-space: nowrap;
    }

    .txt-break {
        word-break: break-word;
    }

    .txt-uppercase {
        text-transform: uppercase;
    }

    .txt-capitalize {
        text-transform: capitalize;
    }

    .txt-capitalize-first-letter::first-letter {
        text-transform: capitalize;
    }

    .txt-link {
        color: var(--color-link);
        text-decoration: underline;
    }

    .font-weight-bold {
        font-weight: 600;
    }

    .font-weight-black {
        font-weight: 900;
    }

    .font-weight-normal {
        font-weight: normal;
    }

    /* Data typography — monospace for measurements, IDs, and technical values */
    .font-data {
        font-family: var(--font-data);
        letter-spacing: -0.01em;
    }

    .tracking-tight {
        letter-spacing: -0.02em;
    }

    .tracking-wide {
        letter-spacing: 0.05em;
    }

    /* Status signal colors — maps to ISO alarm convention */
    .txt-status-normal {
        color: oklch(var(--lch-green-dark));
    }

    .txt-status-warning {
        color: oklch(var(--lch-yellow-dark));
    }

    .txt-status-alarm {
        color: oklch(var(--lch-red-dark));
    }

    .txt-status-info {
        color: oklch(var(--lch-blue-dark));
    }

    .txt-status-offline {
        color: var(--color-ink-medium);
    }

    /* Flexbox and Grid */
    .justify-end {
        justify-content: end;
    }

    .justify-start {
        justify-content: start;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-space-between {
        justify-content: space-between;
    }

    .align-center {
        align-items: center;
    }

    .align-start {
        align-items: start;
    }

    .align-end {
        align-items: end;
    }

    .align-self-center {
        align-self: center;
    }

    .align-self-end {
        align-self: end;
    }

    .align-self-start {
        align-self: start;
    }

    .v-align-middle {
        vertical-align: middle;
    }

    .contain {
        contain: inline-size;
    }

    .display-inline {
        display: inline;
    }

    .flex {
        display: flex;
    }

    .flex-inline {
        display: inline-flex;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-item-grow {
        flex-grow: 1;
    }

    .flex-item-shrink {
        flex-shrink: 1;
    }

    .flex-item-no-shrink {
        flex-shrink: 0;
    }

    .flex-item-justify-start {
        margin-inline-end: auto;
    }

    .flex-item-justify-end {
        margin-inline-start: auto;
    }

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

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

    .gap-none {
        --column-gap: 0;
        --row-gap: 0;

        gap: 0;
    }

    /* Sizing */
    .full-width {
        inline-size: 100%;
    }

    .min-width {
        min-inline-size: 0;
    }

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

    .max-width {
        max-inline-size: 100%;
    }

    .min-content {
        inline-size: min-content;
    }

    .fit-content {
        inline-size: fit-content;
    }

    .max-inline-size {
        max-inline-size: 100%;
    }

    /* Overflow */
    .overflow-x {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .overflow-y {
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

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

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

    .overflow-hide-scrollbar::-webkit-scrollbar {
        @media (pointer: course) {
            display: none;
        }
    }

    .overflow-line-clamp {
        -webkit-line-clamp: var(--lines, 2);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
    }

    /* Mouse pointer */
    .non-clickable {
        cursor: default;
        pointer-events: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .unpad {
        padding: 0;
    }

    .unpad-block-end {
        padding-block-end: 0;
    }

    .unpad-inline {
        padding-inline: 0;
    }

    /* Margins */
    .margin {
        margin: var(--block-space) var(--inline-space);
    }

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

    .margin-block-half {
        margin-block: var(--block-space-half);
    }

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

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

    .margin-block-start-auto {
        margin-block-start: auto;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .margin-none {
        margin: 0;
    }

    .margin-none-block {
        margin-block: 0;
    }

    .margin-none-block-start {
        margin-block-start: 0;
    }

    .margin-none-block-end {
        margin-block-end: 0;
    }

    .margin-none-inline {
        margin-inline: 0;
    }

    .margin-none-inline-start {
        margin-inline-start: 0;
    }

    .margin-none-inline-end {
        margin-inline-end: 0;
    }

    .center {
        margin-inline: auto;
    }

    .center-block {
        margin-block: auto;
    }

    /* Position */
    .position-relative {
        position: relative;
    }

    .position-sticky {
        position: sticky;
        inset: var(--inset, 0 auto auto auto);
        z-index: var(--z, 1);
    }

    /* Fills */
    .fill {
        background-color: var(--color-canvas);
    }

    .fill-black {
        background-color: var(--color-ink);
    }

    .fill-white {
        background-color: var(--color-ink-inverted);
    }

    .fill-shade {
        background-color: var(--color-ink-lightest);
    }

    .fill-shade--error {
        background-color: oklch(var(--lch-red-lighter));
        color: oklch(var(--lch-red-dark));
    }

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

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

    .fill-transparent {
        background-color: transparent;
    }

    .translucent {
        opacity: var(--opacity, 0.66);
    }

    /* Borders */
    .border {
        border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter));
    }

    .border-block {
        border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter));
    }

    .border-bottom {
        border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter));
    }

    .border-top {
        border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter));
    }

    .borderless {
        border: 0;
    }

    /* Border radius */
    .border-radius {
        border-radius: var(--border-radius, 0.5em);
    }

    /* Shadows */
    .shadow {
        box-shadow: var(--shadow);
    }

    /* Lists */
    :where(.list-style-none) {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

    /* Accessibility */
    .visually-hidden,
    .for-screen-reader {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    /* Visibility */
    [hidden] {
        display: none !important;
    }

    .display-contents,
    [contents] {
        display: contents;
    }

    .hide-in-pwa {
        @media (display-mode: standalone) {
            display: none;
        }
    }

    .hide-in-browser {
        @media (display-mode: browser) {
            display: none;
        }
    }

    .hide-focus-ring {
        --focus-ring-size: 0;
    }

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

    .show-on-touch {
        display: none;

        @media (any-hover: none) {
            display: unset;
        }
    }

    .hide-scrollbar {
        -ms-overflow-style: none;
        /* Edge */
        scrollbar-width: none;
        /* FF */

        /* Chrome/Safari/Opera */
        &::-webkit-scrollbar {
            display: none;
        }
    }
}