/* Reusable sizing, color, and interaction utilities. */
.w-var { width: var(--w); }
.h-var { height: var(--h); }
.max-w-var { max-width: var(--max-w); }
.max-w-full { max-width: 100%; }
.min-h-var { min-height: var(--min-h); }
.mt-var { margin-top: var(--mt); }
.ml-var { margin-left: var(--ml); }
.left-var { left: var(--left); }
.top-var { top: var(--top); }
.bg-color-var { background-color: var(--bg); }
.text-color-var { color: var(--text-color); }
.mask-image-var { -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); }
.mask-contain {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.border-solid { border-style: solid; }
.border-color-var { border-color: var(--border-color); }
.border-current { border-color: currentColor; }
.select-none { user-select: none; -webkit-user-select: none; }
.touch-pan-y { touch-action: pan-y pinch-zoom; }
.tracking-tight { letter-spacing: -.05em; }
.focus-ring:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.disabled-fade:disabled { opacity: .35; cursor: default; }
.disabled-bg-color-var:disabled { background-color: var(--disabled-bg); }
.disabled-text-color-var:disabled { color: var(--disabled-text-color); }
.disabled-cursor-default:disabled { cursor: default; }
.motion-transform { transition: transform 440ms cubic-bezier(.2, .8, .2, 1); }
.motion-width { transition: width 440ms cubic-bezier(.2, .8, .2, 1); }
.motion-opacity { transition: opacity var(--opacity-duration, 300ms) var(--opacity-easing, ease) var(--opacity-delay, 0ms); }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 1024px) {
    .lg-w-var { width: var(--lg-w); }
    .lg-h-var { height: var(--lg-h); }
    .lg-max-w-var { max-width: var(--lg-max-w); }
    .lg-min-h-var { min-height: var(--lg-min-h); }
    .lg-grid-cols-var { grid-template-columns: var(--lg-grid-cols); }
    .lg-mt-var { margin-top: var(--lg-mt); }
    .lg-ml-var { margin-left: var(--lg-ml); }
    .lg-left-var { left: var(--lg-left); }
    .lg-top-var { top: var(--lg-top); }
    .lg-bg-color-var { background-color: var(--lg-bg); }
    .lg-flex-row-reverse { flex-direction: row-reverse; }
    .lg-select-auto { user-select: auto; -webkit-user-select: auto; }
    .lg-ring-offset-3 { outline: 1px solid var(--ring-color, currentColor); outline-offset: 3px; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .lg-hover-scale-110:hover:not(:disabled) { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .motion-transform, .motion-width, .motion-opacity { transition: none; }
}