/* Velora Luxe - Utility Classes */

/* === LAYOUT UTILITIES === */

/* Container */
.container-luxe {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
;}

@media (max-width: 768px) {
  .container-luxe {
    padding: 0 var(--space-4);
  }
}

/* Stack - Vertical spacing */
.stack-1 > * + * { margin-top: var(--space-1); ;}
.stack-2 > * + * { margin-top: var(--space-2); ;}
.stack-3 > * + * { margin-top: var(--space-3); ;}
.stack-4 > * + * { margin-top: var(--space-4); ;}
.stack-5 > * + * { margin-top: var(--space-5); ;}
.stack-6 > * + * { margin-top: var(--space-6); ;}
.stack-8 > * + * { margin-top: var(--space-8); ;}

/* Cluster - Horizontal spacing */
.cluster-1 > * + * { margin-left: var(--space-1); ;}
.cluster-2 > * + * { margin-left: var(--space-2); ;}
.cluster-3 > * + * { margin-left: var(--space-3); ;}
.cluster-4 > * + * { margin-left: var(--space-4); ;}
.cluster-5 > * + * { margin-left: var(--space-5); ;}
.cluster-6 > * + * { margin-left: var(--space-6); ;}
.cluster-8 > * + * { margin-left: var(--space-8); ;}

/* Grid utilities */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
;}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
;}

.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
;}

.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
;}

.grid-4-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
;}

@media (max-width: 1024px) {
  .grid-4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-2-cols,
  .grid-3-cols,
  .grid-4-cols {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Flexbox utilities */
.flex { display: flex; ;}
.flex-col { flex-direction: column; ;}
.flex-row { flex-direction: row; ;}
.flex-wrap { flex-wrap: wrap; ;}
.flex-nowrap { flex-wrap: nowrap; ;}

.items-start { align-items: flex-start; ;}
.items-center { align-items: center; ;}
.items-end { align-items: flex-end; ;}
.items-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; ;}
.justify-around { justify-content: space-around; ;}
.justify-evenly { justify-content: space-evenly; ;}

.flex-1 { flex: 1; ;}
.flex-auto { flex: auto; ;}
.flex-none { flex: none; ;}

.gap-1 { gap: var(--space-1); ;}
.gap-2 { gap: var(--space-2); ;}
.gap-3 { gap: var(--space-3); ;}
.gap-4 { gap: var(--space-4); ;}
.gap-5 { gap: var(--space-5); ;}
.gap-6 { gap: var(--space-6); ;}
.gap-8 { gap: var(--space-8); ;}

/* === SPACING UTILITIES === */

/* Margin */
.m-0 { margin: 0; ;}
.m-1 { margin: var(--space-1); ;}
.m-2 { margin: var(--space-2); ;}
.m-3 { margin: var(--space-3); ;}
.m-4 { margin: var(--space-4); ;}
.m-5 { margin: var(--space-5); ;}
.m-6 { margin: var(--space-6); ;}
.m-8 { margin: var(--space-8); ;}

.mx-auto { margin-left: auto; margin-right: auto; ;}
.mx-0 { margin-left: 0; margin-right: 0; ;}
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); ;}
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); ;}
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); ;}
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); ;}
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); ;}
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); ;}

.my-0 { margin-top: 0; margin-bottom: 0; ;}
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); ;}
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); ;}
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); ;}
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); ;}
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); ;}
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); ;}
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); ;}

.mt-0 { margin-top: 0; ;}
.mt-1 { margin-top: var(--space-1); ;}
.mt-2 { margin-top: var(--space-2); ;}
.mt-3 { margin-top: var(--space-3); ;}
.mt-4 { margin-top: var(--space-4); ;}
.mt-5 { margin-top: var(--space-5); ;}
.mt-6 { margin-top: var(--space-6); ;}
.mt-8 { margin-top: var(--space-8); ;}

.mb-0 { margin-bottom: 0; ;}
.mb-1 { margin-bottom: var(--space-1); ;}
.mb-2 { margin-bottom: var(--space-2); ;}
.mb-3 { margin-bottom: var(--space-3); ;}
.mb-4 { margin-bottom: var(--space-4); ;}
.mb-5 { margin-bottom: var(--space-5); ;}
.mb-6 { margin-bottom: var(--space-6); ;}
.mb-8 { margin-bottom: var(--space-8); ;}

.ml-0 { margin-left: 0; ;}
.ml-1 { margin-left: var(--space-1); ;}
.ml-2 { margin-left: var(--space-2); ;}
.ml-3 { margin-left: var(--space-3); ;}
.ml-4 { margin-left: var(--space-4); ;}
.ml-5 { margin-left: var(--space-5); ;}
.ml-6 { margin-left: var(--space-6); ;}

.mr-0 { margin-right: 0; ;}
.mr-1 { margin-right: var(--space-1); ;}
.mr-2 { margin-right: var(--space-2); ;}
.mr-3 { margin-right: var(--space-3); ;}
.mr-4 { margin-right: var(--space-4); ;}
.mr-5 { margin-right: var(--space-5); ;}
.mr-6 { margin-right: var(--space-6); ;}

/* Padding */
.p-0 { padding: 0; ;}
.p-1 { padding: var(--space-1); ;}
.p-2 { padding: var(--space-2); ;}
.p-3 { padding: var(--space-3); ;}
.p-4 { padding: var(--space-4); ;}
.p-5 { padding: var(--space-5); ;}
.p-6 { padding: var(--space-6); ;}
.p-8 { padding: var(--space-8); ;}

.px-0 { padding-left: 0; padding-right: 0; ;}
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); ;}
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); ;}
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); ;}
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); ;}
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); ;}
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); ;}

.py-0 { padding-top: 0; padding-bottom: 0; ;}
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); ;}
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); ;}
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); ;}
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); ;}
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); ;}
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); ;}
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); ;}

.pt-0 { padding-top: 0; ;}
.pt-1 { padding-top: var(--space-1); ;}
.pt-2 { padding-top: var(--space-2); ;}
.pt-3 { padding-top: var(--space-3); ;}
.pt-4 { padding-top: var(--space-4); ;}
.pt-5 { padding-top: var(--space-5); ;}
.pt-6 { padding-top: var(--space-6); ;}
.pt-8 { padding-top: var(--space-8); ;}

.pb-0 { padding-bottom: 0; ;}
.pb-1 { padding-bottom: var(--space-1); ;}
.pb-2 { padding-bottom: var(--space-2); ;}
.pb-3 { padding-bottom: var(--space-3); ;}
.pb-4 { padding-bottom: var(--space-4); ;}
.pb-5 { padding-bottom: var(--space-5); ;}
.pb-6 { padding-bottom: var(--space-6); ;}
.pb-8 { padding-bottom: var(--space-8); ;}

.pl-0 { padding-left: 0; ;}
.pl-1 { padding-left: var(--space-1); ;}
.pl-2 { padding-left: var(--space-2); ;}
.pl-3 { padding-left: var(--space-3); ;}
.pl-4 { padding-left: var(--space-4); ;}
.pl-5 { padding-left: var(--space-5); ;}
.pl-6 { padding-left: var(--space-6); ;}

.pr-0 { padding-right: 0; ;}
.pr-1 { padding-right: var(--space-1); ;}
.pr-2 { padding-right: var(--space-2); ;}
.pr-3 { padding-right: var(--space-3); ;}
.pr-4 { padding-right: var(--space-4); ;}
.pr-5 { padding-right: var(--space-5); ;}
.pr-6 { padding-right: var(--space-6); ;}

/* === TYPOGRAPHY UTILITIES === */

.text-xs { font-size: var(--t-xs); ;}
.text-sm { font-size: var(--t-sm); ;}
.text-md { font-size: var(--t-md); ;}
.text-lg { font-size: var(--t-lg); ;}
.text-xl { font-size: var(--t-xl); ;}
.text-2xl { font-size: var(--t-2xl); ;}
.text-3xl { font-size: var(--t-3xl); ;}
.text-4xl { font-size: var(--t-4xl); ;}
.text-5xl { font-size: var(--t-5xl); ;}
.text-6xl { font-size: var(--t-6xl); ;}

.font-thin { font-weight: var(--font-thin); ;}
.font-light { font-weight: var(--font-light); ;}
.font-normal { font-weight: var(--font-normal); ;}
.font-medium { font-weight: var(--font-medium); ;}
.font-semibold { font-weight: var(--font-semibold); ;}
.font-bold { font-weight: var(--font-bold); ;}
.font-extrabold { font-weight: var(--font-extrabold); ;}
.font-black { font-weight: var(--font-black); ;}

.leading-none { line-height: var(--leading-none); ;}
.leading-tight { line-height: var(--leading-tight); ;}
.leading-snug { line-height: var(--leading-snug); ;}
.leading-normal { line-height: var(--leading-normal); ;}
.leading-relaxed { line-height: var(--leading-relaxed); ;}
.leading-loose { line-height: var(--leading-loose); ;}

.text-left { text-align: left; ;}
.text-center { text-align: center; ;}
.text-right { text-align: right; ;}
.text-justify { text-align: justify; ;}

.uppercase { text-transform: uppercase; ;}
.lowercase { text-transform: lowercase; ;}
.capitalize { text-transform: capitalize; ;}
.normal-case { text-transform: none; ;}

.underline { text-decoration: underline; ;}
.line-through { text-decoration: line-through; ;}
.no-underline { text-decoration: none; ;}

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

/* === VISUAL UTILITIES === */

.rounded-none { border-radius: var(--radius-none); ;}
.rounded-sm { border-radius: var(--radius-sm); ;}
.rounded { border-radius: var(--radius); ;}
.rounded-lg { border-radius: var(--radius-lg); ;}
.rounded-xl { border-radius: var(--radius-xl); ;}
.rounded-2xl { border-radius: var(--radius-2xl); ;}
.rounded-3xl { border-radius: var(--radius-3xl); ;}
.rounded-full { border-radius: var(--radius-full); ;}
.rounded-pill { border-radius: var(--radius-pill); ;}

.shadow-xs { box-shadow: var(--shadow-xs); ;}
.shadow-sm { box-shadow: var(--shadow-sm); ;}
.shadow { box-shadow: var(--shadow); ;}
.shadow-md { box-shadow: var(--shadow-md); ;}
.shadow-lg { box-shadow: var(--shadow-lg); ;}
.shadow-xl { box-shadow: var(--shadow-xl); ;}
.shadow-2xl { box-shadow: var(--shadow-2xl); ;}
.shadow-inner { box-shadow: var(--shadow-inner); ;}
.shadow-elev { box-shadow: var(--elev); ;}

.border { border: 1px solid var(--line); ;}
.border-0 { border: 0; ;}
.border-t { border-top: 1px solid var(--line); ;}
.border-r { border-right: 1px solid var(--line); ;}
.border-b { border-bottom: 1px solid var(--line); ;}
.border-l { border-left: 1px solid var(--line); ;}

.border-soft { border-color: var(--line-soft); ;}
.border-strong { border-color: var(--line-strong); ;}

.opacity-0 { opacity: 0; ;}
.opacity-25 { opacity: 0.25; ;}
.opacity-50 { opacity: 0.5; ;}
.opacity-75 { opacity: 0.75; ;}
.opacity-100 { opacity: 1; ;}

/* === INTERACTION UTILITIES === */

.cursor-pointer { cursor: pointer; ;}
.cursor-not-allowed { cursor: not-allowed; ;}
.cursor-default { cursor: default; ;}
.cursor-help { cursor: help; ;}
.cursor-move { cursor: move; ;}
.cursor-text { cursor: text; ;}

.select-none { user-select: none; ;}
.select-text { user-select: text; ;}
.select-all { user-select: all; ;}
.select-auto { user-select: auto; ;}

.pointer-events-none { pointer-events: none; ;}
.pointer-events-auto { pointer-events: auto; ;}

.resize-none { resize: none; ;}
.resize { resize: both; ;}
.resize-x { resize: horizontal; ;}
.resize-y { resize: vertical; ;}

/* === ACCESSIBILITY UTILITIES === */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
;}

.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
;}

.focus-ring:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
;}

.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;
;}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
;}

/* === TRANSITION UTILITIES === */

.transition-none { transition: none; ;}
.transition-all { transition: all var(--dur-2) var(--ease); ;}
.transition-colors { transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); ;}
.transition-opacity { transition: opacity var(--dur-2) var(--ease); ;}
.transition-shadow { transition: box-shadow var(--dur-2) var(--ease); ;}
.transition-transform { transition: transform var(--dur-2) var(--ease); ;}

.duration-1 { transition-duration: var(--dur-1); ;}
.duration-2 { transition-duration: var(--dur-2); ;}
.duration-3 { transition-duration: var(--dur-3); ;}
.duration-4 { transition-duration: var(--dur-4); ;}
.duration-5 { transition-duration: var(--dur-5); ;}

.ease-linear { transition-timing-function: linear; ;}
.ease-in { transition-timing-function: var(--ease-in); ;}
.ease-out { transition-timing-function: var(--ease-out); ;}
.ease-in-out { transition-timing-function: var(--ease-in-out); ;}
.ease-bounce { transition-timing-function: var(--ease-bounce); ;}

/* === RESPONSIVE UTILITIES === */

.hidden { display: none; ;}
.block { display: block; ;}
.inline { display: inline; ;}
.inline-block { display: inline-block; ;}
.table { display: table; ;}
.table-cell { display: table-cell; ;}
.table-row { display: table-row; ;}

@media (max-width: 640px) {
  .sm\:hidden { display: none; ;}
  .sm\:block { display: block; ;}
  .sm\:flex { display: flex; ;}
  .sm\:grid { display: grid; }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; ;}
  .md\:block { display: block; ;}
  .md\:flex { display: flex; ;}
  .md\:grid { display: grid; }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; ;}
  .lg\:block { display: block; ;}
  .lg\:flex { display: flex; ;}
  .lg\:grid { display: grid; }
}

@media (min-width: 641px) {
  .sm\:hidden { display: none; }
}

@media (min-width: 769px) {
  .md\:hidden { display: none; }
}

@media (min-width: 1025px) {
  .lg\:hidden { display: none; }
}

/* === SCROLL UTILITIES === */

.scroll-auto { scroll-behavior: auto; ;}
.scroll-smooth { scroll-behavior: smooth; ;}

.overflow-auto { overflow: auto; ;}
.overflow-hidden { overflow: hidden; ;}
.overflow-visible { overflow: visible; ;}
.overflow-scroll { overflow: scroll; ;}

.overflow-x-auto { overflow-x: auto; ;}
.overflow-x-hidden { overflow-x: hidden; ;}
.overflow-x-visible { overflow-x: visible; ;}
.overflow-x-scroll { overflow-x: scroll; ;}

.overflow-y-auto { overflow-y: auto; ;}
.overflow-y-hidden { overflow-y: hidden; ;}
.overflow-y-visible { overflow-y: visible; ;}
.overflow-y-scroll { overflow-y: scroll; ;}

/* === POSITION UTILITIES === */

.static { position: static; ;}
.relative { position: relative; ;}
.absolute { position: absolute; ;}
.fixed { position: fixed; ;}
.sticky { position: sticky; ;}

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; ;}
.inset-auto { top: auto; right: auto; bottom: auto; left: auto; ;}

.top-0 { top: 0; ;}
.right-0 { right: 0; ;}
.bottom-0 { bottom: 0; ;}
.left-0 { left: 0; ;}

.top-auto { top: auto; ;}
.right-auto { right: auto; ;}
.bottom-auto { bottom: auto; ;}
.left-auto { left: auto; ;}

.z-0 { z-index: var(--z-0); ;}
.z-10 { z-index: var(--z-10); ;}
.z-20 { z-index: var(--z-20); ;}
.z-30 { z-index: var(--z-30); ;}
.z-40 { z-index: var(--z-40); ;}
.z-50 { z-index: var(--z-50); ;}
.z-auto { z-index: var(--z-auto); ;}

/* === PRINT UTILITIES === */

@media print {
  .print\:hidden { display: none !important; ;}
  .print\:block { display: block !important; ;}
  .print\:inline { display: inline !important; ;}
  .print\:inline-block { display: inline-block !important; }
}