/* ============================================================
   _utils.css — Utilities (Tailwind-style)
   All sizes via variables from _base.css.
   No duplicates. No hardcoded values.
   ============================================================ */

/* ── Display ── */
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-grid         { display: grid !important; }
.d-none         { display: none !important; }
.hidden         { display: none !important; }
.visible        { visibility: visible !important; }
.invisible      { visibility: hidden !important; }
.transform-x-center { left: 50% !important; transform: translateX(-50%) !important; }
.transform-y-center { top: 50% !important; transform: translateY(-50%) !important; }
.transform-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
/* ── Flex ── */
.flex           { display: flex !important; }
.flex-row       { flex-direction: row !important; }
.flex-col       { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.flex-grow      { flex-grow: 1 !important; }
.flex-shrink    { flex-shrink: 1 !important; }
.flex-none      { flex: 0 0 auto !important; }

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

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

/* Flex combo utilities */
.flex-center        { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-center-start  { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
.flex-center-end    { display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.flex-center-between{ display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-col-center    { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

/* ── Gap (via --space-*) ── */
.gap-0  { gap: var(--space-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; }
.gap-8  { gap: var(--space-8) !important; }
.gap-10 { gap: var(--space-10) !important; }
.gap-12 { gap: var(--space-12) !important; }
.gap-16 { gap: var(--space-16) !important; }
.gap-20 { gap: var(--space-20) !important; }

/* ── Margin (via --space-*) ── */
.m-0  { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.mt-0  { margin-top: var(--space-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-5  { margin-top: var(--space-5) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mt-20 { margin-top: var(--space-20) !important; }
.mt-24 { margin-top: var(--space-24) !important; }

.mb-0  { margin-bottom: var(--space-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-8  { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-20 { margin-bottom: var(--space-20) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }

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

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

.mx-0  { margin-left: var(--space-0) !important; margin-right: var(--space-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-4  { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-6  { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8  { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }

.my-0  { margin-top: var(--space-0) !important; margin-bottom: var(--space-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-4  { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-6  { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8  { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
.my-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }

/* ── Padding (via --space-*) ── */
.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; }
.p-8  { padding: var(--space-8) !important; }
.p-10 { padding: var(--space-10) !important; }
.p-12 { padding: var(--space-12) !important; }

.pt-0  { padding-top: var(--space-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; }
.pt-5  { padding-top: var(--space-5) !important; }
.pt-6  { padding-top: var(--space-6) !important; }
.pt-8  { padding-top: var(--space-8) !important; }
.pt-10 { padding-top: var(--space-10) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }
.pt-20 { padding-top: var(--space-20) !important; }
.pt-24 { padding-top: var(--space-24) !important; }

.pb-0  { padding-bottom: var(--space-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; }
.pb-5  { padding-bottom: var(--space-5) !important; }
.pb-6  { padding-bottom: var(--space-6) !important; }
.pb-8  { padding-bottom: var(--space-8) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }
.pb-20 { padding-bottom: var(--space-20) !important; }
.pb-24 { padding-bottom: var(--space-24) !important; }

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

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

.px-0  { padding-left: var(--space-0) !important; padding-right: var(--space-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; }
.px-5  { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6  { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8  { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
.px-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }

.py-0  { padding-top: var(--space-0) !important; padding-bottom: var(--space-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; }
.py-5  { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6  { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8  { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }

/* ── Width & Height ── */
.w-auto   { width: auto !important; }
.w-full   { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-fit    { width: fit-content !important; }
.w-25     { width: 25% !important; }
.w-50     { width: 50% !important; }
.w-75     { width: 75% !important; }
.w-80     { max-width: 80% !important; margin: 0 auto !important; }
.w-90     { max-width: 90% !important; margin: 0 auto !important; }
.w-95     { max-width: 95% !important; margin: 0 auto !important; }

.max-w-full      { max-width: 100% !important; }
.max-w-container { max-width: var(--container-width) !important; }

.h-auto   { height: auto !important; }
.h-full   { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-dvh    { height: 100dvh !important; }
.h-25     { height: 25% !important; }
.h-50     { height: 50% !important; }
.h-75     { height: 75% !important; }

.min-h-screen { min-height: 100vh !important; }
.min-h-dvh    { min-height: 100dvh !important; }

/* ── Position ── */
.static   { position: static !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

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

/* Transforms */
.translate-center  { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
.translateX-center { left: 50% !important; transform: translateX(-50%) !important; }
.translateY-center { top: 50% !important; transform: translateY(-50%) !important; }

/* ── Z-index (via --z-*) ── */
.z-0     { z-index: var(--z-0) !important; }
.z-1     { z-index: var(--z-1) !important; }
.z-10    { z-index: var(--z-10) !important; }
.z-50    { z-index: var(--z-50) !important; }
.z-100   { z-index: var(--z-100) !important; }
.z-modal { z-index: var(--z-modal) !important; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto   { overflow-y: auto !important; }

/* ── Border Radius (via --radius-*) ── */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !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-2xl  { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ── Backgrounds ── */
.bg-main      { background-color: var(--сolor-dark) !important; }
.color-dark-secondary { background-color: var(--color-dark-secondary) !important; }
.bg-card      { background-color: var(--color-primary-opacity) !important; }
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-accent    { background-color: var(--color-accent) !important; }
.bg-success   { background-color: var(--color-success) !important; }
.bg-error     { background-color: var(--color-error) !important; }
.bg-warning   { background-color: var(--color-warning) !important; }
.bg-transparent { background: transparent !important; }
.bg-white     { background-color: #ffffff !important; }
.bg-black     { background-color: #000000 !important; }

.bg-img       { background-size: cover !important; background-position: center !important; }
.bg-cover     { background-size: cover !important; }
.bg-contain   { background-size: contain !important; }
.bg-center    { background-position: center !important; }
.bg-no-repeat { background-repeat: no-repeat !important; }

/* Background pseudo-elements */
.bg-after  { position: relative; }
.bg-after::after  { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; background-repeat: no-repeat; }
.bg-before { position: relative; }
.bg-before::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; background-repeat: no-repeat; }

/* ── Borders ── */
.border          { border: 1px solid var(--color-neutral-600) !important; }
.border-primary  { border: 1px solid var(--color-primary) !important; }
.border-accent   { border: 1px solid var(--color-accent) !important; }
.border-success  { border: 1px solid var(--color-success) !important; }
.border-error    { border: 1px solid var(--color-error) !important; }
.border-white    { border: 1px solid rgba(255,255,255,0.3) !important; }
.border-none     { border: none !important; }
.border-2        { border-width: 2px !important; }

/* ── 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; }

/* ── Shadows (via --shadow-*) ── */
.shadow-sm      { box-shadow: var(--shadow-sm) !important; }
.shadow-md      { box-shadow: var(--shadow-md) !important; }
.shadow-lg      { box-shadow: var(--shadow-lg) !important; }
.shadow-none    { box-shadow: none !important; }
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-accent  { box-shadow: var(--shadow-accent) !important; }
.shadow-glow    { box-shadow: var(--shadow-glow) !important; }

/* ── Transitions (via --ease-*) ── */
.transition      { transition: all var(--ease) !important; }
.transition-fast { transition: all var(--ease-fast) !important; }
.transition-slow { transition: all var(--ease-slow) !important; }
.transition-none { transition: none !important; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab    { cursor: grab !important; }

/* ── Object fit ── */
.object-cover   { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-center  { object-position: center !important; }

/* ── Aspect ratio ── */
.aspect-square  { aspect-ratio: 1 / 1 !important; }
.aspect-video   { aspect-ratio: 16 / 9 !important; }
.aspect-4-3     { aspect-ratio: 4 / 3 !important; }

/* ── Float & Pull ── */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.clearfix::after { content: ""; display: table; clear: both; }

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

/* ── User select ── */
.select-none { user-select: none !important; }
.select-all  { user-select: all !important; }

/* ── Responsive visibility ── */
.mobile  { display: none !important; }
.desktop { display: block !important; }

.item-mobile  { display: none !important; }
.item-desktop { display: block !important; }

@media (max-width: 768px) {
  .mobile  { display: block !important; }
  .desktop { display: none !important; }
  .item-mobile  { display: flex !important; }
  .item-desktop { display: none !important; }
}

@media screen and (max-width: 599px) {
  .hide-xs { display: none !important; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
  .hide-sm { display: none !important; }
}
@media screen and (min-width: 900px) and (max-width: 1199px) {
  .hide-md { display: none !important; }
}
@media screen and (min-width: 1200px) {
  .hide-lg { display: none !important; }
}

/* ── Misc ── */
.is-full-screen  { width: 100%; min-height: 100vh; }
.is-full-width   { width: 100% !important; }
.is-full-height  { height: 100% !important; }
.is-hidden       { display: none !important; }
.sr-only         { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Backward compatibility */
.flex-justify-center  { display: flex; justify-content: center; align-items: center; }
.flex-items-center    { display: flex; align-items: center; }
.flex-center-right    { display: flex; align-items: center; justify-content: flex-end; }
.flex-center-left     { display: flex; align-items: center; justify-content: flex-start; }
.justify-between      { display: flex; justify-content: space-between; }
.items-center         { display: flex; align-items: center; }

/* Legacy gap classes */
.gap-sm  { gap: var(--space-1) !important; }
.gap-md  { gap: var(--space-2) !important; }
.gap-lg  { gap: var(--space-4) !important; }
.gap-xl  { gap: var(--space-6) !important; }
.gap-xxl { gap: var(--space-8) !important; }

/* ── Text Color ── */
.text-primary   { color: var(--color-primary) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-success   { color: var(--color-success) !important; }
.text-error     { color: var(--color-error) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-muted     { color: var(--color-muted) !important; }
.text-main      { color: var(--color-light) !important; }
.text-white     { color: #ffffff !important; }
.text-black     { color: #000000 !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 ── */
.text-uppercase   { text-transform: uppercase !important; }
.text-lowercase   { text-transform: lowercase !important; }
.text-capitalize  { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* ── Text Size ── */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-xl   { font-size: var(--fs-xl) !important; }
.text-2xl  { font-size: var(--fs-2xl) !important; }
.text-3xl  { font-size: var(--fs-3xl) !important; }
.text-4xl  { font-size: var(--fs-4xl) !important; }
.text-5xl  { font-size: var(--fs-5xl) !important; }
.text-6xl  { font-size: var(--fs-6xl) !important; }

/* ── Text Weight ── */
.font-thin     { font-weight: 100 !important; }
.font-light    { font-weight: 300 !important; }
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }
.font-extrabold{ font-weight: 800 !important; }
.font-black    { font-weight: 900 !important; }
.text-bold     { font-weight: 700 !important; }

/* ── Text Misc ── */
.text-balance  { text-wrap: balance !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-pretty   { text-wrap: pretty !important; }
.text-wrap     { white-space: normal !important; }
.truncate      { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.line-clamp-2  { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.line-clamp-3  { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.italic        { font-style: italic !important; }
.not-italic    { font-style: normal !important; }
.underline     { text-decoration: underline !important; }
.line-through  { text-decoration: line-through !important; }
.no-underline  { text-decoration: none !important; }

/* ── Backwards compat (from _util.css) ── */
.bg-light  { background-color: var(--color-neutral-200) !important; }
.bg-dark   { background-color: var(--color-neutral-600) !important; }
.bg-grey   { background-color: var(--color-neutral-400) !important; }
.bg-shadow { background-color: var(--color-primary-shadow) !important; }
.bd-primary{ border: 1px solid var(--color-primary) !important; }
.bd-error  { border: 1px solid var(--color-error) !important; }
.bd-success{ border: 1px solid var(--color-success) !important; }
.bd-grey   { border: 1px solid var(--color-neutral-400) !important; }
.text-light{ color: var(--color-muted-light) !important; }
.mx-sm     { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-md     { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-lg     { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mt-sm     { margin-top: var(--space-1) !important; }
.mb-sm     { margin-bottom: var(--space-1) !important; }
.mt-md     { margin-top: var(--space-2) !important; }
.mb-md     { margin-bottom: var(--space-2) !important; }
.mt-lg     { margin-top: var(--space-4) !important; }
.mb-lg     { margin-bottom: var(--space-4) !important; }
.mt-xl     { margin-top: var(--space-6) !important; }
.mb-xl     { margin-bottom: var(--space-6) !important; }
.pt-sm     { padding-top: var(--space-1) !important; }
.pb-sm     { padding-bottom: var(--space-1) !important; }
.pt-md     { padding-top: var(--space-2) !important; }
.pb-md     { padding-bottom: var(--space-2) !important; }
.pt-lg     { padding-top: var(--space-4) !important; }
.pb-lg     { padding-bottom: var(--space-4) !important; }
.pt-xl     { padding-top: var(--space-6) !important; }
.pb-xl     { padding-bottom: var(--space-6) !important; }
.px-sm     { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-md     { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-lg     { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-xl     { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.py-sm     { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-md     { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-lg     { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-xl     { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }