:root {
  --spacing-unit: 4px;
  --radius-unit: 2px; /* default radius step */
}

/* Width Utilities */
.w-0    { width: 0; }
.w-auto { width: auto; }

.w-1    { width: 0.25rem; }   /* 4px */
.w-2    { width: 0.5rem; }    /* 8px */
.w-3    { width: 0.75rem; }   /* 12px */
.w-4    { width: 1rem; }      /* 16px */
.w-5    { width: 1.25rem; }   /* 20px */
.w-6    { width: 1.5rem; }    /* 24px */
.w-8    { width: 2rem; }      /* 32px */
.w-10   { width: 2.5rem; }    /* 40px */
.w-12   { width: 3rem; }      /* 48px */
.w-16   { width: 4rem; }      /* 64px */
.w-20   { width: 5rem; }      /* 80px */
.w-24   { width: 6rem; }      /* 96px */
.w-32   { width: 8rem; }      /* 128px */
.w-40   { width: 10rem; }     /* 160px */
.w-48   { width: 12rem; }     /* 192px */
.w-56   { width: 14rem; }     /* 224px */
.w-64   { width: 16rem; }     /* 256px */

/* Percentage Widths */
.w-1\/2   { width: 50%; }
.w-1\/3   { width: 33.3333%; }
.w-2\/3   { width: 66.6667%; }
.w-1\/4   { width: 25%; }
.w-2\/4   { width: 50%; }
.w-3\/4   { width: 75%; }
.w-full   { width: 100%; }
.w-screen { width: 100vw; }


/* Height Utilities */
.h-0    { height: 0; }
.h-auto { height: auto; }

.h-1    { height: 0.25rem; }   /* 4px */
.h-2    { height: 0.5rem; }    /* 8px */
.h-3    { height: 0.75rem; }   /* 12px */
.h-4    { height: 1rem; }      /* 16px */
.h-5    { height: 1.25rem; }   /* 20px */
.h-6    { height: 1.5rem; }    /* 24px */
.h-8    { height: 2rem; }      /* 32px */
.h-10   { height: 2.5rem; }    /* 40px */
.h-12   { height: 3rem; }      /* 48px */
.h-16   { height: 4rem; }      /* 64px */
.h-20   { height: 5rem; }      /* 80px */
.h-24   { height: 6rem; }      /* 96px */
.h-32   { height: 8rem; }      /* 128px */
.h-40   { height: 10rem; }     /* 160px */
.h-48   { height: 12rem; }     /* 192px */
.h-56   { height: 14rem; }     /* 224px */
.h-64   { height: 16rem; }     /* 256px */

/* Percentage Heights */
.h-1\/2   { height: 50%; }
.h-1\/3   { height: 33.3333%; }
.h-2\/3   { height: 66.6667%; }
.h-1\/4   { height: 25%; }
.h-2\/4   { height: 50%; }
.h-3\/4   { height: 75%; }
.h-full   { height: 100%; }
.h-screen { height: 100vh; }


.relative{
  position: relative;
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: start;
}
.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}


/* Gap Utilities */
.gap-1 {
  gap: 0.25rem; /* 4px */
}

.gap-2 {
  gap: 0.5rem; /* 8px */
}

.gap-3 {
  gap: 0.75rem; /* 12px */
}

.gap-4 {
  gap: 1rem; /* 16px */
}

.gap-5 {
  gap: 1.25rem; /* 20px */
}

.gap-6 {
  gap: 1.5rem; /* 24px */
}

.gap-10 {
  gap: 2.5rem; /* 24px */
}
/* Horizontal Gap (gap-x) */
.gap-x-1 {
  column-gap: 0.25rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}

/* Vertical Gap (gap-y) */
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}



/* Text size utility classes */

.text-xxs {
  font-size: 10px; /* 10px */
}

.text-xs {
  font-size: 12px; /* 12px */
}

.text-sm {
  font-size: 14px !important; /* 14px */
}

.text-base {
  font-size: 1rem !important; /* 16px */
}

.text-lg {
  font-size: 1.125rem !important; /* 18px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
}

.text-4xl {
  font-size: 2.25rem; /* 36px */
}

.text-5xl {
  font-size: 3rem; /* 48px */
}

.text-6xl {
  font-size: 3.75rem; /* 60px */
}



.p-1 { padding: calc(1 * var(--spacing-unit)); }
.p-2 { padding: calc(2 * var(--spacing-unit)); }
.p-3 { padding: calc(3 * var(--spacing-unit)); }
.p-4 { padding: calc(4 * var(--spacing-unit)); }
.p-5 { padding: calc(5 * var(--spacing-unit)); }
.p-6 { padding: calc(6 * var(--spacing-unit)); }
.p-7 { padding: calc(7 * var(--spacing-unit)); }
.p-8 { padding: calc(8 * var(--spacing-unit)); }
.p-9 { padding: calc(9 * var(--spacing-unit)); }
.p-10 { padding: calc(10 * var(--spacing-unit)); }




/* === Padding Top === */
.pt-05 { padding-top: calc(0.5 * var(--spacing-unit)); }
.pt-1 { padding-top: calc(1 * var(--spacing-unit)); }
.pt-2 { padding-top: calc(2 * var(--spacing-unit)); }
.pt-3 { padding-top: calc(3 * var(--spacing-unit)); }
.pt-4 { padding-top: calc(4 * var(--spacing-unit)); }
.pt-5 { padding-top: calc(5 * var(--spacing-unit)); }
.pt-6 { padding-top: calc(6 * var(--spacing-unit)); }
.pt-7 { padding-top: calc(7 * var(--spacing-unit)); }
.pt-8 { padding-top: calc(8 * var(--spacing-unit)); }
.pt-9 { padding-top: calc(9 * var(--spacing-unit)); }
.pt-10 { padding-top: calc(10 * var(--spacing-unit)); }

/* === Padding Bottom === */
.pb-1 { padding-bottom: calc(1 * var(--spacing-unit)); }
.pb-2 { padding-bottom: calc(2 * var(--spacing-unit)); }
.pb-3 { padding-bottom: calc(3 * var(--spacing-unit)); }
.pb-4 { padding-bottom: calc(4 * var(--spacing-unit)); }
.pb-5 { padding-bottom: calc(5 * var(--spacing-unit)); }
.pb-6 { padding-bottom: calc(6 * var(--spacing-unit)); }
.pb-7 { padding-bottom: calc(7 * var(--spacing-unit)); }
.pb-8 { padding-bottom: calc(8 * var(--spacing-unit)); }
.pb-9 { padding-bottom: calc(9 * var(--spacing-unit)); }
.pb-10 { padding-bottom: calc(10 * var(--spacing-unit)); }

/* === Padding Left === */
.pl-1 { padding-left: calc(1 * var(--spacing-unit)); }
.pl-2 { padding-left: calc(2 * var(--spacing-unit)); }
.pl-3 { padding-left: calc(3 * var(--spacing-unit)); }
.pl-4 { padding-left: calc(4 * var(--spacing-unit)); }
.pl-5 { padding-left: calc(5 * var(--spacing-unit)); }
.pl-6 { padding-left: calc(6 * var(--spacing-unit)); }
.pl-7 { padding-left: calc(7 * var(--spacing-unit)); }
.pl-8 { padding-left: calc(8 * var(--spacing-unit)); }
.pl-9 { padding-left: calc(9 * var(--spacing-unit)); }
.pl-10 { padding-left: calc(10 * var(--spacing-unit)); }

/* === Padding Right === */
.pr-1 { padding-right: calc(1 * var(--spacing-unit)); }
.pr-2 { padding-right: calc(2 * var(--spacing-unit)); }
.pr-3 { padding-right: calc(3 * var(--spacing-unit)); }
.pr-4 { padding-right: calc(4 * var(--spacing-unit)); }
.pr-5 { padding-right: calc(5 * var(--spacing-unit)); }
.pr-6 { padding-right: calc(6 * var(--spacing-unit)); }
.pr-7 { padding-right: calc(7 * var(--spacing-unit)); }
.pr-8 { padding-right: calc(8 * var(--spacing-unit)); }
.pr-9 { padding-right: calc(9 * var(--spacing-unit)); }
.pr-10 { padding-right: calc(10 * var(--spacing-unit)); }

/* === Padding X (Left + Right) === */
.px-1 { padding-left: calc(1 * var(--spacing-unit)); padding-right: calc(1 * var(--spacing-unit)); }
.px-2 { padding-left: calc(2 * var(--spacing-unit)); padding-right: calc(2 * var(--spacing-unit)); }
.px-3 { padding-left: calc(3 * var(--spacing-unit)); padding-right: calc(3 * var(--spacing-unit)); }
.px-4 { padding-left: calc(4 * var(--spacing-unit)); padding-right: calc(4 * var(--spacing-unit)); }
.px-5 { padding-left: calc(5 * var(--spacing-unit)); padding-right: calc(5 * var(--spacing-unit)); }
.px-6 { padding-left: calc(6 * var(--spacing-unit)); padding-right: calc(6 * var(--spacing-unit)); }
.px-7 { padding-left: calc(7 * var(--spacing-unit)); padding-right: calc(7 * var(--spacing-unit)); }
.px-8 { padding-left: calc(8 * var(--spacing-unit)); padding-right: calc(8 * var(--spacing-unit)); }
.px-9 { padding-left: calc(9 * var(--spacing-unit)); padding-right: calc(9 * var(--spacing-unit)); }
.px-10 { padding-left: calc(10 * var(--spacing-unit)); padding-right: calc(10 * var(--spacing-unit)); }

/* === Padding Y (Top + Bottom) === */
.py-1 { padding-top: calc(1 * var(--spacing-unit)); padding-bottom: calc(1 * var(--spacing-unit)); }
.py-2 { padding-top: calc(2 * var(--spacing-unit)); padding-bottom: calc(2 * var(--spacing-unit)); }
.py-3 { padding-top: calc(3 * var(--spacing-unit)); padding-bottom: calc(3 * var(--spacing-unit)); }
.py-4 { padding-top: calc(4 * var(--spacing-unit)); padding-bottom: calc(4 * var(--spacing-unit)); }
.py-5 { padding-top: calc(5 * var(--spacing-unit)); padding-bottom: calc(5 * var(--spacing-unit)); }
.py-6 { padding-top: calc(6 * var(--spacing-unit)); padding-bottom: calc(6 * var(--spacing-unit)); }
.py-7 { padding-top: calc(7 * var(--spacing-unit)); padding-bottom: calc(7 * var(--spacing-unit)); }
.py-8 { padding-top: calc(8 * var(--spacing-unit)); padding-bottom: calc(8 * var(--spacing-unit)); }
.py-9 { padding-top: calc(9 * var(--spacing-unit)); padding-bottom: calc(9 * var(--spacing-unit)); }
.py-10 { padding-top: calc(10 * var(--spacing-unit)); padding-bottom: calc(10 * var(--spacing-unit)); }

.m-1 { margin: calc(1 * var(--spacing-unit)); }
.m-2 { margin: calc(2 * var(--spacing-unit)); }
.m-3 { margin: calc(3 * var(--spacing-unit)); }
.m-4 { margin: calc(4 * var(--spacing-unit)); }
.m-5 { margin: calc(5 * var(--spacing-unit)); }
.m-6 { margin: calc(6 * var(--spacing-unit)); }
.m-7 { margin: calc(7 * var(--spacing-unit)); }
.m-8 { margin: calc(8 * var(--spacing-unit)); }
.m-9 { margin: calc(9 * var(--spacing-unit)); }
.m-10 { margin: calc(10 * var(--spacing-unit)); }

/* === Margin Top === */
.mt-1 { margin-top: calc(1 * var(--spacing-unit)); }
.mt-2 { margin-top: calc(2 * var(--spacing-unit)); }
.mt-3 { margin-top: calc(3 * var(--spacing-unit)); }
.mt-4 { margin-top: calc(4 * var(--spacing-unit)); }
.mt-5 { margin-top: calc(5 * var(--spacing-unit)); }
.mt-6 { margin-top: calc(6 * var(--spacing-unit)); }
.mt-7 { margin-top: calc(7 * var(--spacing-unit)); }
.mt-8 { margin-top: calc(8 * var(--spacing-unit)); }
.mt-9 { margin-top: calc(9 * var(--spacing-unit)); }
.mt-10 { margin-top: calc(10 * var(--spacing-unit)); }

/* === Margin Bottom === */
.mb-1 { margin-bottom: calc(1 * var(--spacing-unit)); }
.mb-2 { margin-bottom: calc(2 * var(--spacing-unit)); }
.mb-3 { margin-bottom: calc(3 * var(--spacing-unit)); }
.mb-4 { margin-bottom: calc(4 * var(--spacing-unit)); }
.mb-5 { margin-bottom: calc(5 * var(--spacing-unit)); }
.mb-6 { margin-bottom: calc(6 * var(--spacing-unit)); }
.mb-7 { margin-bottom: calc(7 * var(--spacing-unit)); }
.mb-8 { margin-bottom: calc(8 * var(--spacing-unit)); }
.mb-9 { margin-bottom: calc(9 * var(--spacing-unit)); }
.mb-10 { margin-bottom: calc(10 * var(--spacing-unit)); }

/* === Margin Left === */
.ml-1 { margin-left: calc(1 * var(--spacing-unit)); }
.ml-2 { margin-left: calc(2 * var(--spacing-unit)); }
.ml-3 { margin-left: calc(3 * var(--spacing-unit)); }
.ml-4 { margin-left: calc(4 * var(--spacing-unit)); }
.ml-5 { margin-left: calc(5 * var(--spacing-unit)); }
.ml-6 { margin-left: calc(6 * var(--spacing-unit)); }
.ml-7 { margin-left: calc(7 * var(--spacing-unit)); }
.ml-8 { margin-left: calc(8 * var(--spacing-unit)); }
.ml-9 { margin-left: calc(9 * var(--spacing-unit)); }
.ml-10 { margin-left: calc(10 * var(--spacing-unit)); }

/* === Margin Right === */
.mr-1 { margin-right: calc(1 * var(--spacing-unit)); }
.mr-2 { margin-right: calc(2 * var(--spacing-unit)); }
.mr-3 { margin-right: calc(3 * var(--spacing-unit)); }
.mr-4 { margin-right: calc(4 * var(--spacing-unit)); }
.mr-5 { margin-right: calc(5 * var(--spacing-unit)); }
.mr-6 { margin-right: calc(6 * var(--spacing-unit)); }
.mr-7 { margin-right: calc(7 * var(--spacing-unit)); }
.mr-8 { margin-right: calc(8 * var(--spacing-unit)); }
.mr-9 { margin-right: calc(9 * var(--spacing-unit)); }
.mr-10 { margin-right: calc(10 * var(--spacing-unit)); }

/* === Margin X (Left + Right) === */
.mx-1 { margin-left: calc(1 * var(--spacing-unit)); margin-right: calc(1 * var(--spacing-unit)); }
.mx-2 { margin-left: calc(2 * var(--spacing-unit)); margin-right: calc(2 * var(--spacing-unit)); }
.mx-3 { margin-left: calc(3 * var(--spacing-unit)); margin-right: calc(3 * var(--spacing-unit)); }
.mx-4 { margin-left: calc(4 * var(--spacing-unit)); margin-right: calc(4 * var(--spacing-unit)); }
.mx-5 { margin-left: calc(5 * var(--spacing-unit)); margin-right: calc(5 * var(--spacing-unit)); }
.mx-6 { margin-left: calc(6 * var(--spacing-unit)); margin-right: calc(6 * var(--spacing-unit)); }
.mx-7 { margin-left: calc(7 * var(--spacing-unit)); margin-right: calc(7 * var(--spacing-unit)); }
.mx-8 { margin-left: calc(8 * var(--spacing-unit)); margin-right: calc(8 * var(--spacing-unit)); }
.mx-9 { margin-left: calc(9 * var(--spacing-unit)); margin-right: calc(9 * var(--spacing-unit)); }
.mx-10 { margin-left: calc(10 * var(--spacing-unit)); margin-right: calc(10 * var(--spacing-unit)); }

/* === Margin Y (Top + Bottom) === */
.my-1 { margin-top: calc(1 * var(--spacing-unit)); margin-bottom: calc(1 * var(--spacing-unit)); }
.my-2 { margin-top: calc(2 * var(--spacing-unit)); margin-bottom: calc(2 * var(--spacing-unit)); }
.my-3 { margin-top: calc(3 * var(--spacing-unit)); margin-bottom: calc(3 * var(--spacing-unit)); }
.my-4 { margin-top: calc(4 * var(--spacing-unit)); margin-bottom: calc(4 * var(--spacing-unit)); }
.my-5 { margin-top: calc(5 * var(--spacing-unit)); margin-bottom: calc(5 * var(--spacing-unit)); }
.my-6 { margin-top: calc(6 * var(--spacing-unit)); margin-bottom: calc(6 * var(--spacing-unit)); }
.my-7 { margin-top: calc(7 * var(--spacing-unit)); margin-bottom: calc(7 * var(--spacing-unit)); }
.my-8 { margin-top: calc(8 * var(--spacing-unit)); margin-bottom: calc(8 * var(--spacing-unit)); }
.my-9 { margin-top: calc(9 * var(--spacing-unit)); margin-bottom: calc(9 * var(--spacing-unit)); }
.my-10 { margin-top: calc(10 * var(--spacing-unit)); margin-bottom: calc(10 * var(--spacing-unit)); }

.border{
  border: 1px solid #ddd
}

.rounded-1 { border-radius: calc(1 * var(--radius-unit, 2px)); }
.rounded-2 { border-radius: calc(2 * var(--radius-unit, 2px)); }
.rounded-3 { border-radius: calc(3 * var(--radius-unit, 2px)); }
.rounded-4 { border-radius: calc(4 * var(--radius-unit, 2px)); }
.rounded-5 { border-radius: calc(5 * var(--radius-unit, 2px)); }
.rounded-6 { border-radius: calc(6 * var(--radius-unit, 2px)); }
.rounded-7 { border-radius: calc(7 * var(--radius-unit, 2px)); }
.rounded-8 { border-radius: calc(8 * var(--radius-unit, 2px)); }
.rounded-9 { border-radius: calc(9 * var(--radius-unit, 2px)); }
.rounded-10 { border-radius: calc(10 * var(--radius-unit, 2px)); }


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

/* Opacity Utilities */
.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-95  { opacity: 0.95; }
.opacity-100 { opacity: 1; }