/* =========================================================
   RLM Utilities (Atomic utility classes only)
   Tailwind-style atomic utilities for composing designs
   ========================================================= */

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

/* Display */
.flex{ display: flex !important; }
.grid{ display: grid !important; }
.block{ display: block !important; }
.inline{ display: inline !important; }
.inline-block{ display: inline-block !important; }
.inline-flex{ display: inline-flex !important; }
.inline-grid{ display: inline-grid !important; }
.hidden{ display: none !important; }

/* Flexbox */
.flex-col{ flex-direction: column !important; }
.flex-row{ flex-direction: row !important; }
.flex-wrap{ flex-wrap: wrap !important; }
.flex-nowrap{ flex-wrap: nowrap !important; }
.flex-1{ flex: 1 !important; }
.flex-auto{ flex: 1 1 auto !important; }
.flex-none{ flex: none !important; }
.flex-shrink-0{ flex-shrink: 0 !important; }
.flex-grow{ flex-grow: 1 !important; }

/* Justify Content */
.justify-start{ justify-content: flex-start !important; }
.justify-end{ justify-content: flex-end !important; }
.justify-center{ justify-content: center !important; }
.justify-between{ justify-content: space-between !important; }
.justify-around{ justify-content: space-around !important; }
.justify-evenly{ justify-content: space-evenly !important; }

/* Align Items */
.items-start{ align-items: flex-start !important; }
.items-end{ align-items: flex-end !important; }
.items-center{ align-items: center !important; }
.items-baseline{ align-items: baseline !important; }
.items-stretch{ align-items: stretch !important; }

/* Align Self */
.self-auto{ align-self: auto !important; }
.self-start{ align-self: flex-start !important; }
.self-end{ align-self: flex-end !important; }
.self-center{ align-self: center !important; }
.self-stretch{ align-self: stretch !important; }

/* Grid Template Columns */
.grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12{ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.grid-cols-none{ grid-template-columns: none !important; }

/* Grid Column Span */
.col-auto{ grid-column: auto !important; }
.col-span-1{ grid-column: span 1 / span 1 !important; }
.col-span-2{ grid-column: span 2 / span 2 !important; }
.col-span-3{ grid-column: span 3 / span 3 !important; }
.col-span-4{ grid-column: span 4 / span 4 !important; }
.col-span-5{ grid-column: span 5 / span 5 !important; }
.col-span-6{ grid-column: span 6 / span 6 !important; }
.col-span-full{ grid-column: 1 / -1 !important; }

/* Grid Column Start */
.col-start-1{ grid-column-start: 1 !important; }
.col-start-2{ grid-column-start: 2 !important; }
.col-start-3{ grid-column-start: 3 !important; }
.col-start-4{ grid-column-start: 4 !important; }
.col-start-auto{ grid-column-start: auto !important; }

/* Grid Column End */
.col-end-1{ grid-column-end: 1 !important; }
.col-end-2{ grid-column-end: 2 !important; }
.col-end-3{ grid-column-end: 3 !important; }
.col-end-4{ grid-column-end: 4 !important; }
.col-end-auto{ grid-column-end: auto !important; }

/* Grid Row Span */
.row-auto{ grid-row: auto !important; }
.row-span-1{ grid-row: span 1 / span 1 !important; }
.row-span-2{ grid-row: span 2 / span 2 !important; }
.row-span-3{ grid-row: span 3 / span 3 !important; }
.row-span-4{ grid-row: span 4 / span 4 !important; }
.row-span-full{ grid-row: 1 / -1 !important; }

/* Grid Auto Flow */
.grid-flow-row{ grid-auto-flow: row !important; }
.grid-flow-col{ grid-auto-flow: column !important; }
.grid-flow-dense{ grid-auto-flow: dense !important; }
.grid-flow-row-dense{ grid-auto-flow: row dense !important; }
.grid-flow-col-dense{ grid-auto-flow: column dense !important; }

/* Responsive Grid - Small (≥480px) */
@media (min-width: 480px){
  .sm\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-none{ grid-template-columns: none !important; }

  .sm\:col-auto{ grid-column: auto !important; }
  .sm\:col-span-1{ grid-column: span 1 / span 1 !important; }
  .sm\:col-span-2{ grid-column: span 2 / span 2 !important; }
  .sm\:col-span-3{ grid-column: span 3 / span 3 !important; }
  .sm\:col-span-4{ grid-column: span 4 / span 4 !important; }
  .sm\:col-span-5{ grid-column: span 5 / span 5 !important; }
  .sm\:col-span-6{ grid-column: span 6 / span 6 !important; }
  .sm\:col-span-full{ grid-column: 1 / -1 !important; }

  .sm\:col-start-1{ grid-column-start: 1 !important; }
  .sm\:col-start-2{ grid-column-start: 2 !important; }
  .sm\:col-start-3{ grid-column-start: 3 !important; }
  .sm\:col-start-4{ grid-column-start: 4 !important; }
  .sm\:col-start-auto{ grid-column-start: auto !important; }
}

/* Responsive Grid - Medium (≥768px) */
@media (min-width: 768px){
  .md\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .md\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .md\:grid-cols-none{ grid-template-columns: none !important; }

  .md\:col-auto{ grid-column: auto !important; }
  .md\:col-span-1{ grid-column: span 1 / span 1 !important; }
  .md\:col-span-2{ grid-column: span 2 / span 2 !important; }
  .md\:col-span-3{ grid-column: span 3 / span 3 !important; }
  .md\:col-span-4{ grid-column: span 4 / span 4 !important; }
  .md\:col-span-5{ grid-column: span 5 / span 5 !important; }
  .md\:col-span-6{ grid-column: span 6 / span 6 !important; }
  .md\:col-span-full{ grid-column: 1 / -1 !important; }

  .md\:col-start-1{ grid-column-start: 1 !important; }
  .md\:col-start-2{ grid-column-start: 2 !important; }
  .md\:col-start-3{ grid-column-start: 3 !important; }
  .md\:col-start-4{ grid-column-start: 4 !important; }
  .md\:col-start-auto{ grid-column-start: auto !important; }
}

/* Responsive Grid - Large (≥1024px) */
@media (min-width: 1024px){
  .lg\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-none{ grid-template-columns: none !important; }

  .lg\:col-auto{ grid-column: auto !important; }
  .lg\:col-span-1{ grid-column: span 1 / span 1 !important; }
  .lg\:col-span-2{ grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3{ grid-column: span 3 / span 3 !important; }
  .lg\:col-span-4{ grid-column: span 4 / span 4 !important; }
  .lg\:col-span-5{ grid-column: span 5 / span 5 !important; }
  .lg\:col-span-6{ grid-column: span 6 / span 6 !important; }
  .lg\:col-span-full{ grid-column: 1 / -1 !important; }

  .lg\:col-start-1{ grid-column-start: 1 !important; }
  .lg\:col-start-2{ grid-column-start: 2 !important; }
  .lg\:col-start-3{ grid-column-start: 3 !important; }
  .lg\:col-start-4{ grid-column-start: 4 !important; }
  .lg\:col-start-auto{ grid-column-start: auto !important; }
}

/* Responsive Grid - XLarge (≥1280px) */
@media (min-width: 1280px){
  .xl\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-none{ grid-template-columns: none !important; }

  .xl\:col-auto{ grid-column: auto !important; }
  .xl\:col-span-1{ grid-column: span 1 / span 1 !important; }
  .xl\:col-span-2{ grid-column: span 2 / span 2 !important; }
  .xl\:col-span-3{ grid-column: span 3 / span 3 !important; }
  .xl\:col-span-4{ grid-column: span 4 / span 4 !important; }
  .xl\:col-span-5{ grid-column: span 5 / span 5 !important; }
  .xl\:col-span-6{ grid-column: span 6 / span 6 !important; }
  .xl\:col-span-full{ grid-column: 1 / -1 !important; }

  .xl\:col-start-1{ grid-column-start: 1 !important; }
  .xl\:col-start-2{ grid-column-start: 2 !important; }
  .xl\:col-start-3{ grid-column-start: 3 !important; }
  .xl\:col-start-4{ grid-column-start: 4 !important; }
  .xl\:col-start-auto{ grid-column-start: auto !important; }
}

/* Gap */
.gap-0{ gap: 0 !important; }
.gap-1{ gap: var(--space-1) !important; }
.gap-2{ gap: var(--space-2) !important; }
.gap-3{ gap: var(--space-3) !important; }
.gap-4{ gap: var(--space-4) !important; }
.gap-5{ gap: var(--space-5) !important; }
.gap-6{ gap: var(--space-6) !important; }

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

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

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

.py-0{ padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

.pt-0{ padding-top: 0 !important; }
.pt-1{ padding-top: var(--space-1) !important; }
.pt-2{ padding-top: var(--space-2) !important; }
.pt-3{ padding-top: var(--space-3) !important; }
.pt-4{ padding-top: var(--space-4) !important; }

.pb-0{ padding-bottom: 0 !important; }
.pb-1{ padding-bottom: var(--space-1) !important; }
.pb-2{ padding-bottom: var(--space-2) !important; }
.pb-3{ padding-bottom: var(--space-3) !important; }
.pb-4{ padding-bottom: var(--space-4) !important; }

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

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

/* Margin */
.m-0{ margin: 0 !important; }
.m-1{ margin: var(--space-1) !important; }
.m-2{ margin: var(--space-2) !important; }
.m-3{ margin: var(--space-3) !important; }
.m-4{ margin: var(--space-4) !important; }
.m-auto{ margin: auto !important; }

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

.my-0{ margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }

.mt-0{ margin-top: 0 !important; }
.mt-1{ margin-top: var(--space-1) !important; }
.mt-2{ margin-top: var(--space-2) !important; }
.mt-3{ margin-top: var(--space-3) !important; }
.mt-4{ margin-top: var(--space-4) !important; }
.mt-auto{ margin-top: auto !important; }

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

.ml-0{ margin-left: 0 !important; }
.ml-1{ margin-left: var(--space-1) !important; }
.ml-2{ margin-left: var(--space-2) !important; }
.ml-3{ margin-left: var(--space-3) !important; }
.ml-4{ margin-left: var(--space-4) !important; }
.ml-auto{ margin-left: auto !important; }

.mr-0{ margin-right: 0 !important; }
.mr-1{ margin-right: var(--space-1) !important; }
.mr-2{ margin-right: var(--space-2) !important; }
.mr-3{ margin-right: var(--space-3) !important; }
.mr-4{ margin-right: var(--space-4) !important; }
.mr-auto{ margin-right: auto !important; }

/* Space Between */
.space-y-0 > * + *{ margin-top: 0 !important; }
.space-y-1 > * + *{ margin-top: var(--space-1) !important; }
.space-y-2 > * + *{ margin-top: var(--space-2) !important; }
.space-y-3 > * + *{ margin-top: var(--space-3) !important; }
.space-y-4 > * + *{ margin-top: var(--space-4) !important; }

.space-x-0 > * + *{ margin-left: 0 !important; }
.space-x-1 > * + *{ margin-left: var(--space-1) !important; }
.space-x-2 > * + *{ margin-left: var(--space-2) !important; }
.space-x-3 > * + *{ margin-left: var(--space-3) !important; }
.space-x-4 > * + *{ margin-left: var(--space-4) !important; }

/* ===== SIZING UTILITIES ===== */

/* Width */
.w-auto{ width: auto !important; }
.w-full{ width: 100% !important; }
.w-screen{ width: 100vw !important; }
.w-min{ width: min-content !important; }
.w-max{ width: max-content !important; }
.w-fit{ width: fit-content !important; }

/* Height */
.h-auto{ height: auto !important; }
.h-full{ height: 100% !important; }
.h-screen{ height: 100vh !important; }
.h-min{ height: min-content !important; }
.h-max{ height: max-content !important; }
.h-fit{ height: fit-content !important; }

/* Min/Max Width */
.min-w-0{ min-width: 0 !important; }
.min-w-full{ min-width: 100% !important; }
.max-w-none{ max-width: none !important; }
.max-w-xs{ max-width: 320px !important; }
.max-w-sm{ max-width: 480px !important; }
.max-w-md{ max-width: 768px !important; }
.max-w-lg{ max-width: 1024px !important; }
.max-w-xl{ max-width: 1280px !important; }
.max-w-container{ max-width: var(--container-max) !important; }

/* Min/Max Height */
.min-h-0{ min-height: 0 !important; }
.min-h-full{ min-height: 100% !important; }
.max-h-full{ max-height: 100% !important; }

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

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

/* Position Values */
.inset-0{ inset: 0 !important; }
.top-0{ top: 0 !important; }
.top-1{ top: var(--space-1) !important; }
.top-2{ top: var(--space-2) !important; }
.top-3{ top: var(--space-3) !important; }
.top-4{ top: var(--space-4) !important; }

.right-0{ right: 0 !important; }
.right-1{ right: var(--space-1) !important; }
.right-2{ right: var(--space-2) !important; }
.right-3{ right: var(--space-3) !important; }
.right-4{ right: var(--space-4) !important; }

.bottom-0{ bottom: 0 !important; }
.bottom-1{ bottom: var(--space-1) !important; }
.bottom-2{ bottom: var(--space-2) !important; }
.bottom-3{ bottom: var(--space-3) !important; }
.bottom-4{ bottom: var(--space-4) !important; }

.left-0{ left: 0 !important; }
.left-1{ left: var(--space-1) !important; }
.left-2{ left: var(--space-2) !important; }
.left-3{ left: var(--space-3) !important; }
.left-4{ left: var(--space-4) !important; }

/* Z-Index */
.z-0{ z-index: 0 !important; }
.z-10{ z-index: 10 !important; }
.z-20{ z-index: 20 !important; }
.z-30{ z-index: 30 !important; }
.z-40{ z-index: 40 !important; }
.z-50{ z-index: 50 !important; }
.z-dropdown{ z-index: var(--z-dropdown) !important; }
.z-sticky{ z-index: var(--z-sticky) !important; }
.z-overlay{ z-index: var(--z-overlay) !important; }
.z-modal{ z-index: var(--z-modal) !important; }

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

/* Font Size */
.text-xs{ font-size: calc(var(--fs-small) * 0.92) !important; } /* ~12px */
.text-sm, .text-small{ font-size: var(--fs-small) !important; } /* 13px */
.text-base{ font-size: var(--fs-body) !important; } /* 14px */
.text-lg{ font-size: var(--fs-h5) !important; }
.text-xl{ font-size: var(--fs-h4) !important; }
.text-2xl{ font-size: var(--fs-h3) !important; }
.text-3xl{ font-size: var(--fs-h2) !important; }
.text-4xl{ font-size: var(--fs-h1) !important; }

/* Heading-specific font size utilities (semantic names) */
.text-h5{ font-size: var(--fs-h5) !important; } /* 16px */
.text-h4{ font-size: var(--fs-h4) !important; } /* 18-22px responsive */
.text-h3{ font-size: var(--fs-h3) !important; } /* 22-27px responsive */
.text-h2{ font-size: var(--fs-h2) !important; } /* 27-34px responsive */
.text-h1{ font-size: var(--fs-h1) !important; } /* 34-43px responsive */

/* Font Weight */
.font-normal{ font-weight: var(--font-weight-regular) !important; }
.font-medium{ font-weight: var(--font-weight-medium) !important; }
.font-semibold{ font-weight: var(--font-weight-semibold) !important; }
.font-bold{ font-weight: var(--font-weight-bold) !important; }

/* Text Align */
.text-left{ text-align: left !important; }
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }
.text-justify{ text-align: justify !important; }

/* Text Transform */
.uppercase{ text-transform: uppercase !important; }
.lowercase{ text-transform: lowercase !important; }
.capitalize{ text-transform: capitalize !important; }
.normal-case{ text-transform: none !important; }

/* Text Decoration */
.underline{ text-decoration: underline !important; }
.overline{ text-decoration: overline !important; }
.line-through{ text-decoration: line-through !important; }
.no-underline{ text-decoration: none !important; }

/* Line Height */
.leading-none{ line-height: 1 !important; }
.leading-tight{ line-height: var(--lh-tight) !important; }
.leading-snug{ line-height: var(--lh-medium) !important; }
.leading-normal{ line-height: var(--lh-normal) !important; }

/* ===== COLOR UTILITIES ===== */

/* Text Colors */
.text-inherit{ color: inherit !important; }
.text-current{ color: currentColor !important; }
.text-transparent{ color: transparent !important; }
.text-black{ color: #000 !important; }
.text-white{ color: #fff !important; }
.text-primary{ color: var(--color-primary) !important; }
.text-heading{ color: var(--color-heading) !important; }
.text-body{ color: var(--color-text) !important; }
.text-muted{ color: var(--gray-400) !important; }
.text-success{ color: var(--color-success) !important; }
.text-warning{ color: var(--color-warning) !important; }
.text-danger{ color: var(--color-danger) !important; }
.text-info{ color: var(--color-info) !important; }

/* Background Colors */
.bg-transparent{ background-color: transparent !important; }
.bg-current{ background-color: currentColor !important; }
.bg-black{ background-color: #000 !important; }
.bg-white{ background-color: #fff !important; }
.bg-primary{ background-color: var(--color-primary) !important; }
.bg-surface{ background-color: var(--color-surface) !important; }
.bg-surface-alt{ background-color: var(--color-surface-alt) !important; }
.bg-success{ background-color: var(--color-success) !important; }
.bg-warning{ background-color: var(--color-warning) !important; }
.bg-danger{ background-color: var(--color-danger) !important; }
.bg-info{ background-color: var(--color-info) !important; }

/* ===== BORDER UTILITIES ===== */

/* Border Width */
.border-0{ border-width: 0 !important; }
.border{ border-width: var(--border-width-1) !important; }
.border-2{ border-width: var(--border-width-2) !important; }

.border-t-0{ border-top-width: 0 !important; }
.border-t{ border-top-width: var(--border-width-1) !important; }
.border-r-0{ border-right-width: 0 !important; }
.border-r{ border-right-width: var(--border-width-1) !important; }
.border-b-0{ border-bottom-width: 0 !important; }
.border-b{ border-bottom-width: var(--border-width-1) !important; }
.border-l-0{ border-left-width: 0 !important; }
.border-l{ border-left-width: var(--border-width-1) !important; }

/* Border Color */
.border-transparent{ border-color: transparent !important; }
.border-current{ border-color: currentColor !important; }
.border-black{ border-color: #000 !important; }
.border-white{ border-color: #fff !important; }
.border-primary{ border-color: var(--color-primary) !important; }
.border-surface{ border-color: var(--color-border) !important; }

/* Border Style */
.border-solid{ border-style: solid !important; }
.border-dashed{ border-style: dashed !important; }
.border-dotted{ border-style: dotted !important; }
.border-none{ border-style: none !important; }

/* Border Radius */
.rounded-none{ border-radius: 0 !important; }
.rounded-sm{ border-radius: var(--radius-sm) !important; }
.rounded{ border-radius: var(--radius-md) !important; }
.rounded-md{ border-radius: var(--radius-md) !important; }
.rounded-lg{ border-radius: var(--radius-lg) !important; }
.rounded-xl{ border-radius: var(--radius-xl) !important; }
.rounded-full{ border-radius: var(--radius-pill) !important; }

/* ===== EFFECTS UTILITIES ===== */

/* Opacity */
.opacity-0{ opacity: 0 !important; }
.opacity-25{ opacity: 0.25 !important; }
.opacity-50{ opacity: 0.5 !important; }
.opacity-75{ opacity: 0.75 !important; }
.opacity-100{ opacity: 1 !important; }

/* Box Shadow */
.shadow-none{ box-shadow: none !important; }
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.shadow{ box-shadow: var(--shadow-md) !important; }
.shadow-lg{ box-shadow: var(--shadow-lg) !important; }

/* ===== OVERFLOW UTILITIES ===== */

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

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

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

/* ===== ASPECT RATIO UTILITIES ===== */

.aspect-auto{ aspect-ratio: auto !important; }
.aspect-square{ aspect-ratio: var(--ratio-square) !important; }
.aspect-video{ aspect-ratio: var(--ratio-wide-angle) !important; }
.aspect-4-3{ aspect-ratio: var(--ratio-standard) !important; }
.aspect-3-2{ aspect-ratio: 3 / 2 !important; }

/* ===== OBJECT UTILITIES ===== */

.object-contain{ object-fit: contain !important; }
.object-cover{ object-fit: cover !important; }
.object-fill{ object-fit: fill !important; }
.object-none{ object-fit: none !important; }
.object-scale-down{ object-fit: scale-down !important; }

/* ===== INTERACTIVITY UTILITIES ===== */

/* Cursor */
.cursor-auto{ cursor: auto !important; }
.cursor-default{ cursor: default !important; }
.cursor-pointer{ cursor: pointer !important; }
.cursor-wait{ cursor: wait !important; }
.cursor-text{ cursor: text !important; }
.cursor-move{ cursor: move !important; }
.cursor-help{ cursor: help !important; }
.cursor-not-allowed{ cursor: not-allowed !important; }

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

/* User Select */
.select-none{ user-select: none !important; }
.select-text{ user-select: text !important; }
.select-all{ user-select: all !important; }
.select-auto{ user-select: auto !important; }

/* ===== TRANSFORM UTILITIES ===== */

.transform{ transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.transform-none{ transform: none !important; }

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

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

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