/* Padding Utilities */
.p-012   { padding: var(--watts-spacing-012); }
.p-025   { padding: var(--watts-spacing-025); }
.p-037   { padding: var(--watts-spacing-037); }
.p-050   { padding: var(--watts-spacing-050); }
.p-075   { padding: var(--watts-spacing-075); }
.p-100   { padding: var(--watts-spacing-100); }
.p-125   { padding: var(--watts-spacing-125); }
.p-150   { padding: var(--watts-spacing-150); }
.p-200   { padding: var(--watts-spacing-200); }
.p-250   { padding: var(--watts-spacing-250); }
.p-300   { padding: var(--watts-spacing-300); }
.p-350   { padding: var(--watts-spacing-350); }
.p-400   { padding: var(--watts-spacing-400); }
.p-450   { padding: var(--watts-spacing-450); }
.p-500   { padding: var(--watts-spacing-500); }
.p-550   { padding: var(--watts-spacing-550); }

.pt-012  { padding-top: var(--watts-spacing-012); }
.pt-025  { padding-top: var(--watts-spacing-025); }
.pt-037  { padding-top: var(--watts-spacing-037); }
.pt-050  { padding-top: var(--watts-spacing-050); }
.pt-075  { padding-top: var(--watts-spacing-075); }
.pt-100  { padding-top: var(--watts-spacing-100); }
.pt-125  { padding-top: var(--watts-spacing-125); }
.pt-150  { padding-top: var(--watts-spacing-150); }
.pt-200  { padding-top: var(--watts-spacing-200); }
.pt-250  { padding-top: var(--watts-spacing-250); }
.pt-300  { padding-top: var(--watts-spacing-300); }
.pt-350  { padding-top: var(--watts-spacing-350); }
.pt-400  { padding-top: var(--watts-spacing-400); }
.pt-450  { padding-top: var(--watts-spacing-450); }
.pt-500  { padding-top: var(--watts-spacing-500); }
.pt-550  { padding-top: var(--watts-spacing-550); }

.pr-012  { padding-right: var(--watts-spacing-012); }
.pr-025  { padding-right: var(--watts-spacing-025); }
.pr-037  { padding-right: var(--watts-spacing-037); }
.pr-050  { padding-right: var(--watts-spacing-050); }
.pr-075  { padding-right: var(--watts-spacing-075); }
.pr-100  { padding-right: var(--watts-spacing-100); }
.pr-125  { padding-right: var(--watts-spacing-125); }
.pr-150  { padding-right: var(--watts-spacing-150); }
.pr-200  { padding-right: var(--watts-spacing-200); }
.pr-250  { padding-right: var(--watts-spacing-250); }
.pr-300  { padding-right: var(--watts-spacing-300); }
.pr-350  { padding-right: var(--watts-spacing-350); }
.pr-400  { padding-right: var(--watts-spacing-400); }
.pr-450  { padding-right: var(--watts-spacing-450); }
.pr-500  { padding-right: var(--watts-spacing-500); }
.pr-550  { padding-right: var(--watts-spacing-550); }

.pb-012  { padding-bottom: var(--watts-spacing-012); }
.pb-025  { padding-bottom: var(--watts-spacing-025); }
.pb-037  { padding-bottom: var(--watts-spacing-037); }
.pb-050  { padding-bottom: var(--watts-spacing-050); }
.pb-075  { padding-bottom: var(--watts-spacing-075); }
.pb-100  { padding-bottom: var(--watts-spacing-100); }
.pb-125  { padding-bottom: var(--watts-spacing-125); }
.pb-150  { padding-bottom: var(--watts-spacing-150); }
.pb-200  { padding-bottom: var(--watts-spacing-200); }
.pb-250  { padding-bottom: var(--watts-spacing-250); }
.pb-300  { padding-bottom: var(--watts-spacing-300); }
.pb-350  { padding-bottom: var(--watts-spacing-350); }
.pb-400  { padding-bottom: var(--watts-spacing-400); }
.pb-450  { padding-bottom: var(--watts-spacing-450); }
.pb-500  { padding-bottom: var(--watts-spacing-500); }
.pb-550  { padding-bottom: var(--watts-spacing-550); }

.pl-012  { padding-left: var(--watts-spacing-012); }
.pl-025  { padding-left: var(--watts-spacing-025); }
.pl-037  { padding-left: var(--watts-spacing-037); }
.pl-050  { padding-left: var(--watts-spacing-050); }
.pl-075  { padding-left: var(--watts-spacing-075); }
.pl-100  { padding-left: var(--watts-spacing-100); }
.pl-125  { padding-left: var(--watts-spacing-125); }
.pl-150  { padding-left: var(--watts-spacing-150); }
.pl-200  { padding-left: var(--watts-spacing-200); }
.pl-250  { padding-left: var(--watts-spacing-250); }
.pl-300  { padding-left: var(--watts-spacing-300); }
.pl-350  { padding-left: var(--watts-spacing-350); }
.pl-400  { padding-left: var(--watts-spacing-400); }
.pl-450  { padding-left: var(--watts-spacing-450); }
.pl-500  { padding-left: var(--watts-spacing-500); }
.pl-550  { padding-left: var(--watts-spacing-550); }

/* Margin Utilities */
.m-012   { margin: var(--watts-spacing-012); }
.m-025   { margin: var(--watts-spacing-025); }
.m-037   { margin: var(--watts-spacing-037); }
.m-050   { margin: var(--watts-spacing-050); }
.m-075   { margin: var(--watts-spacing-075); }
.m-100   { margin: var(--watts-spacing-100); }
.m-125   { margin: var(--watts-spacing-125); }
.m-150   { margin: var(--watts-spacing-150); }
.m-200   { margin: var(--watts-spacing-200); }
.m-250   { margin: var(--watts-spacing-250); }
.m-300   { margin: var(--watts-spacing-300); }
.m-350   { margin: var(--watts-spacing-350); }
.m-400   { margin: var(--watts-spacing-400); }
.m-450   { margin: var(--watts-spacing-450); }
.m-500   { margin: var(--watts-spacing-500); }
.m-550   { margin: var(--watts-spacing-550); }

.mt-012  { margin-top: var(--watts-spacing-012); }
.mt-025  { margin-top: var(--watts-spacing-025); }
.mt-037  { margin-top: var(--watts-spacing-037); }
.mt-050  { margin-top: var(--watts-spacing-050); }
.mt-075  { margin-top: var(--watts-spacing-075); }
.mt-100  { margin-top: var(--watts-spacing-100); }
.mt-125  { margin-top: var(--watts-spacing-125); }
.mt-150  { margin-top: var(--watts-spacing-150); }
.mt-200  { margin-top: var(--watts-spacing-200); }
.mt-250  { margin-top: var(--watts-spacing-250); }
.mt-300  { margin-top: var(--watts-spacing-300); }
.mt-350  { margin-top: var(--watts-spacing-350); }
.mt-400  { margin-top: var(--watts-spacing-400); }
.mt-450  { margin-top: var(--watts-spacing-450); }
.mt-500  { margin-top: var(--watts-spacing-500); }
.mt-550  { margin-top: var(--watts-spacing-550); }

.mr-012  { margin-right: var(--watts-spacing-012); }
.mr-025  { margin-right: var(--watts-spacing-025); }
.mr-037  { margin-right: var(--watts-spacing-037); }
.mr-050  { margin-right: var(--watts-spacing-050); }
.mr-075  { margin-right: var(--watts-spacing-075); }
.mr-100  { margin-right: var(--watts-spacing-100); }
.mr-125  { margin-right: var(--watts-spacing-125); }
.mr-150  { margin-right: var(--watts-spacing-150); }
.mr-200  { margin-right: var(--watts-spacing-200); }
.mr-250  { margin-right: var(--watts-spacing-250); }
.mr-300  { margin-right: var(--watts-spacing-300); }
.mr-350  { margin-right: var(--watts-spacing-350); }
.mr-400  { margin-right: var(--watts-spacing-400); }
.mr-450  { margin-right: var(--watts-spacing-450); }
.mr-500  { margin-right: var(--watts-spacing-500); }
.mr-550  { margin-right: var(--watts-spacing-550); }

.mb-012  { margin-bottom: var(--watts-spacing-012); }
.mb-025  { margin-bottom: var(--watts-spacing-025); }
.mb-037  { margin-bottom: var(--watts-spacing-037); }
.mb-050  { margin-bottom: var(--watts-spacing-050); }
.mb-075  { margin-bottom: var(--watts-spacing-075); }
.mb-100  { margin-bottom: var(--watts-spacing-100); }
.mb-125  { margin-bottom: var(--watts-spacing-125); }
.mb-150  { margin-bottom: var(--watts-spacing-150); }
.mb-200  { margin-bottom: var(--watts-spacing-200); }
.mb-250  { margin-bottom: var(--watts-spacing-250); }
.mb-300  { margin-bottom: var(--watts-spacing-300); }
.mb-350  { margin-bottom: var(--watts-spacing-350); }
.mb-400  { margin-bottom: var(--watts-spacing-400); }
.mb-450  { margin-bottom: var(--watts-spacing-450); }
.mb-500  { margin-bottom: var(--watts-spacing-500); }
.mb-550  { margin-bottom: var(--watts-spacing-550); }

.ml-012  { margin-left: var(--watts-spacing-012); }
.ml-025  { margin-left: var(--watts-spacing-025); }
.ml-037  { margin-left: var(--watts-spacing-037); }
.ml-050  { margin-left: var(--watts-spacing-050); }
.ml-075  { margin-left: var(--watts-spacing-075); }
.ml-100  { margin-left: var(--watts-spacing-100); }
.ml-125  { margin-left: var(--watts-spacing-125); }
.ml-150  { margin-left: var(--watts-spacing-150); }
.ml-200  { margin-left: var(--watts-spacing-200); }
.ml-250  { margin-left: var(--watts-spacing-250); }
.ml-300  { margin-left: var(--watts-spacing-300); }
.ml-350  { margin-left: var(--watts-spacing-350); }
.ml-400  { margin-left: var(--watts-spacing-400); }
.ml-450  { margin-left: var(--watts-spacing-450); }
.ml-500  { margin-left: var(--watts-spacing-500); }
.ml-550  { margin-left: var(--watts-spacing-550); }

/* Gap Utilities (for flex/grid containers) */
.gap-012   { gap: var(--watts-spacing-012); }
.gap-025   { gap: var(--watts-spacing-025); }
.gap-037   { gap: var(--watts-spacing-037); }
.gap-050   { gap: var(--watts-spacing-050); }
.gap-075   { gap: var(--watts-spacing-075); }
.gap-100   { gap: var(--watts-spacing-100); }
.gap-125   { gap: var(--watts-spacing-125); }
.gap-150   { gap: var(--watts-spacing-150); }
.gap-200   { gap: var(--watts-spacing-200); }
.gap-250   { gap: var(--watts-spacing-250); }
.gap-300   { gap: var(--watts-spacing-300); }
.gap-350   { gap: var(--watts-spacing-350); }
.gap-400   { gap: var(--watts-spacing-400); }
.gap-450   { gap: var(--watts-spacing-450); }
.gap-500   { gap: var(--watts-spacing-500); }
.gap-550   { gap: var(--watts-spacing-550); }

.row-gap-012   { row-gap: var(--watts-spacing-012); }
.row-gap-025   { row-gap: var(--watts-spacing-025); }
.row-gap-037   { row-gap: var(--watts-spacing-037); }
.row-gap-050   { row-gap: var(--watts-spacing-050); }
.row-gap-075   { row-gap: var(--watts-spacing-075); }
.row-gap-100   { row-gap: var(--watts-spacing-100); }
.row-gap-125   { row-gap: var(--watts-spacing-125); }
.row-gap-150   { row-gap: var(--watts-spacing-150); }
.row-gap-200   { row-gap: var(--watts-spacing-200); }
.row-gap-250   { row-gap: var(--watts-spacing-250); }
.row-gap-300   { row-gap: var(--watts-spacing-300); }
.row-gap-350   { row-gap: var(--watts-spacing-350); }
.row-gap-400   { row-gap: var(--watts-spacing-400); }
.row-gap-450   { row-gap: var(--watts-spacing-450); }
.row-gap-500   { row-gap: var(--watts-spacing-500); }
.row-gap-550   { row-gap: var(--watts-spacing-550); }

.column-gap-012   { column-gap: var(--watts-spacing-012); }
.column-gap-025   { column-gap: var(--watts-spacing-025); }
.column-gap-037   { column-gap: var(--watts-spacing-037); }
.column-gap-050   { column-gap: var(--watts-spacing-050); }
.column-gap-075   { column-gap: var(--watts-spacing-075); }
.column-gap-100   { column-gap: var(--watts-spacing-100); }
.column-gap-125   { column-gap: var(--watts-spacing-125); }
.column-gap-150   { column-gap: var(--watts-spacing-150); }
.column-gap-200   { column-gap: var(--watts-spacing-200); } 
.column-gap-250   { column-gap: var(--watts-spacing-250); }
.column-gap-300   { column-gap: var(--watts-spacing-300); }
.column-gap-350   { column-gap: var(--watts-spacing-350); }
.column-gap-400   { column-gap: var(--watts-spacing-400); }
.column-gap-450   { column-gap: var(--watts-spacing-450); }
.column-gap-500   { column-gap: var(--watts-spacing-500); }
.column-gap-550   { column-gap: var(--watts-spacing-550); }

/* Flexbox Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

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

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

.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Shorthand utilities */
.w-100 { width: 100%; }
.w-75 { width: 75%; }
.w-50 { width: 50%; }
.w-25 { width: 25%; }
.h-100 { height: 100%; }
.h-75 { height: 75%; }
.h-50 { height: 50%; }
.h-25 { height: 25%; }
.min-h-100 { min-height: 100%; }
.min-w-100 { min-width: 100%; }
.max-h-100 { max-height: 100%; }
.max-w-100 { max-width: 100%; }

.pointer { cursor: pointer; }