/*! 9ui Utilities v1.0 | MIT License | https://9ui.dev */

/* ─── Display ─── */
.ui-block        { display: block; }
.ui-inline       { display: inline; }
.ui-inline-block { display: inline-block; }
.ui-hidden       { display: none; }
.ui-sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── Spacing ─── */
.ui-m-auto  { margin: auto; }
.ui-mx-auto { margin-inline: auto; }
.ui-my-auto { margin-block: auto; }
.ui-p-0  { padding: 0; }
.ui-p-2  { padding: var(--ui-space-2); }
.ui-p-4  { padding: var(--ui-space-4); }
.ui-p-6  { padding: var(--ui-space-6); }
.ui-p-8  { padding: var(--ui-space-8); }
.ui-px-4 { padding-inline: var(--ui-space-4); }
.ui-px-6 { padding-inline: var(--ui-space-6); }
.ui-py-2 { padding-block: var(--ui-space-2); }
.ui-py-4 { padding-block: var(--ui-space-4); }
.ui-py-6 { padding-block: var(--ui-space-6); }
.ui-mt-2  { margin-top: var(--ui-space-2); }
.ui-mt-4  { margin-top: var(--ui-space-4); }
.ui-mt-6  { margin-top: var(--ui-space-6); }
.ui-mt-8  { margin-top: var(--ui-space-8); }
.ui-mb-2  { margin-bottom: var(--ui-space-2); }
.ui-mb-4  { margin-bottom: var(--ui-space-4); }
.ui-mb-6  { margin-bottom: var(--ui-space-6); }
.ui-mb-8  { margin-bottom: var(--ui-space-8); }

/* ─── Text ─── */
.ui-text-left    { text-align: left; }
.ui-text-center  { text-align: center; }
.ui-text-right   { text-align: right; }
.ui-text-xs      { font-size: var(--ui-text-xs); }
.ui-text-sm      { font-size: var(--ui-text-sm); }
.ui-text-base    { font-size: var(--ui-text-base); }
.ui-text-lg      { font-size: var(--ui-text-lg); }
.ui-text-xl      { font-size: var(--ui-text-xl); }
.ui-text-2xl     { font-size: var(--ui-text-2xl); }
.ui-text-3xl     { font-size: var(--ui-text-3xl); }
.ui-font-light    { font-weight: var(--ui-font-light); }
.ui-font-regular  { font-weight: var(--ui-font-regular); }
.ui-font-medium   { font-weight: var(--ui-font-medium); }
.ui-font-semibold { font-weight: var(--ui-font-semibold); }
.ui-font-bold     { font-weight: var(--ui-font-bold); }
.ui-font-extrabold{ font-weight: var(--ui-font-extrabold); }
.ui-italic        { font-style: italic; }
.ui-uppercase     { text-transform: uppercase; letter-spacing: var(--ui-tracking-wider); }
.ui-lowercase     { text-transform: lowercase; }
.ui-capitalize    { text-transform: capitalize; }
.ui-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-break-word    { word-break: break-word; overflow-wrap: break-word; }
.ui-no-wrap       { white-space: nowrap; }

/* ─── Colors ─── */
.ui-text-primary     { color: hsl(var(--ui-primary)); }
.ui-text-secondary   { color: hsl(var(--ui-secondary-foreground)); }
.ui-text-muted       { color: hsl(var(--ui-muted-foreground)); }
.ui-text-destructive { color: hsl(var(--ui-destructive)); }
.ui-text-success     { color: hsl(var(--ui-success)); }
.ui-text-warning     { color: hsl(var(--ui-warning)); }
.ui-bg-primary       { background-color: hsl(var(--ui-primary)); color: hsl(var(--ui-primary-foreground)); }
.ui-bg-secondary     { background-color: hsl(var(--ui-secondary)); }
.ui-bg-muted         { background-color: hsl(var(--ui-muted)); }
.ui-bg-card          { background-color: hsl(var(--ui-card)); }
.ui-bg-transparent   { background-color: transparent; }

/* ─── Border ─── */
.ui-border          { border: 1px solid hsl(var(--ui-border)); }
.ui-border-0        { border: none; }
.ui-border-t        { border-top: 1px solid hsl(var(--ui-border)); }
.ui-border-b        { border-bottom: 1px solid hsl(var(--ui-border)); }
.ui-border-primary  { border-color: hsl(var(--ui-primary)); }
.ui-rounded-none    { border-radius: 0; }
.ui-rounded-sm      { border-radius: var(--ui-radius-sm); }
.ui-rounded         { border-radius: var(--ui-radius-base); }
.ui-rounded-md      { border-radius: var(--ui-radius-md); }
.ui-rounded-lg      { border-radius: var(--ui-radius-lg); }
.ui-rounded-xl      { border-radius: var(--ui-radius-xl); }
.ui-rounded-2xl     { border-radius: var(--ui-radius-2xl); }
.ui-rounded-full    { border-radius: var(--ui-radius-full); }

/* ─── Shadow ─── */
.ui-shadow-none { box-shadow: none; }
.ui-shadow-xs   { box-shadow: var(--ui-shadow-xs); }
.ui-shadow-sm   { box-shadow: var(--ui-shadow-sm); }
.ui-shadow      { box-shadow: var(--ui-shadow); }
.ui-shadow-md   { box-shadow: var(--ui-shadow-md); }
.ui-shadow-lg   { box-shadow: var(--ui-shadow-lg); }
.ui-shadow-xl   { box-shadow: var(--ui-shadow-xl); }

/* ─── Width / Height ─── */
.ui-w-full  { width: 100%; }
.ui-w-auto  { width: auto; }
.ui-h-full  { height: 100%; }
.ui-h-screen{ height: 100dvh; }
.ui-min-h-screen { min-height: 100dvh; }
.ui-max-w-sm  { max-width: var(--ui-container-sm); }
.ui-max-w-md  { max-width: var(--ui-container-md); }
.ui-max-w-lg  { max-width: var(--ui-container-lg); }
.ui-max-w-xl  { max-width: var(--ui-container-xl); }

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

/* ─── Position ─── */
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
.ui-fixed    { position: fixed; }
.ui-sticky   { position: sticky; }
.ui-inset-0  { inset: 0; }

/* ─── Opacity ─── */
.ui-opacity-0   { opacity: 0; }
.ui-opacity-50  { opacity: 0.5; }
.ui-opacity-75  { opacity: 0.75; }
.ui-opacity-100 { opacity: 1; }

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

/* ─── Pointer events ─── */
.ui-pointer-none   { pointer-events: none; }
.ui-pointer-auto   { pointer-events: auto; }

/* ─── Z-index ─── */
.ui-z-0   { z-index: 0; }
.ui-z-10  { z-index: 10; }
.ui-z-20  { z-index: 20; }
.ui-z-50  { z-index: 50; }
.ui-z-100 { z-index: 100; }

/* ─── Aspect Ratio ─── */
.ui-aspect-square { aspect-ratio: 1 / 1; }
.ui-aspect-video  { aspect-ratio: 16 / 9; }
.ui-aspect-portrait { aspect-ratio: 3 / 4; }

/* ─── Object Fit ─── */
.ui-object-cover   { object-fit: cover; }
.ui-object-contain { object-fit: contain; }

/* ─── Transition ─── */
.ui-transition { transition: all var(--ui-duration-normal) var(--ui-ease-default); }
.ui-transition-fast { transition: all var(--ui-duration-fast) var(--ui-ease-default); }
.ui-transition-slow { transition: all var(--ui-duration-slow) var(--ui-ease-default); }
.ui-transition-colors { transition: color, background-color, border-color var(--ui-duration-normal) var(--ui-ease-default); }
.ui-transition-opacity { transition: opacity var(--ui-duration-normal) var(--ui-ease-default); }
.ui-transition-transform { transition: transform var(--ui-duration-normal) var(--ui-ease-default); }

/* ─── Hover utilities ─── */
.ui-hover-lift {
  transition: transform var(--ui-duration-normal) var(--ui-ease-spring), box-shadow var(--ui-duration-normal) var(--ui-ease-out);
}
.ui-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-lg);
}

.ui-hover-scale:hover { transform: scale(1.02); }
.ui-hover-glow:hover  { box-shadow: 0 0 20px hsl(var(--ui-primary) / 0.3); }

/* ─── Glass morphism ─── */
.ui-glass {
  background: hsl(var(--ui-card) / 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--ui-border) / 0.5);
}