/* Interactive Hover States */
.interactive-hover {
    transition: transform 0.2s ease, color 0.2s ease;
}

.interactive-hover:hover {
    transform: translateX(4px);
}

/* Visually Hidden Utility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text Utilities */
.text-right {
    text-align: right;
}

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

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

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

/* Display Utilities */
.flex {
    display: flex;
}

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

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

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

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

.justify-end {
    justify-content: flex-end;
}

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

.gap-sm {
    gap: calc(var(--space-unit) * 2);
}

.gap-md {
    gap: calc(var(--space-unit) * 4);
}

.gap-lg {
    gap: calc(var(--space-unit) * 6);
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.max-w-65ch {
    max-width: 65ch;
}

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

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

/* Border Utilities */
.border-b {
    border-bottom: 1px solid var(--color-border);
}

.border-b-thick {
    border-bottom: 2px solid var(--color-text);
}

.border-t {
    border-top: 1px solid var(--color-border);
}

.border-t-thick {
    border-top: 2px solid var(--color-text);
}

/* Background Utilities */
.bg-grid {
    background: var(--color-grid);
}

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

/* Z-index Utilities */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

/* Pointer Events */
.pointer-events-none {
    pointer-events: none;
}

/* Spacing Utilities */
.mt-xl {
    margin-top: calc(var(--space-unit) * 12);
}

.mb-0 {
    margin-bottom: 0;
}

.font-size-sm {
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Nav Logo Enhancement */
.nav-logo-mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    margin-right: calc(var(--space-unit) * 2);
    vertical-align: middle;
}