/**
 * Utility Classes
 * Single-purpose, reusable utility classes
 * Namespace: nim-
 */

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

/* Background Colors - Greyscale */
.nim-bg-grey-100 { background-color: var(--grey-100); }
.nim-bg-grey-250 { background-color: var(--grey-250); }
.nim-bg-grey-400 { background-color: var(--grey-400); }
.nim-bg-grey-550 { background-color: var(--grey-550); }
.nim-bg-grey-700 { background-color: var(--grey-700); }
.nim-bg-grey-900 { background-color: var(--grey-900); }

/* Background Colors - Blue */
.nim-bg-blue-100 { background-color: var(--blue-100); }
.nim-bg-blue-250 { background-color: var(--blue-250); }
.nim-bg-blue-400 { background-color: var(--blue-400); }
.nim-bg-blue-550 { background-color: var(--blue-550); }
.nim-bg-blue-700 { background-color: var(--blue-700); }
.nim-bg-blue-900 { background-color: var(--blue-900); }

/* Background Colors - Orange */
.nim-bg-orange-100 { background-color: var(--orange-100); }
.nim-bg-orange-250 { background-color: var(--orange-250); }
.nim-bg-orange-400 { background-color: var(--orange-400); }
.nim-bg-orange-550 { background-color: var(--orange-550); }
.nim-bg-orange-700 { background-color: var(--orange-700); }
.nim-bg-orange-900 { background-color: var(--orange-900); }

/* Semantic Backgrounds */
.nim-bg-page { background-color: var(--bg-page); }
.nim-bg-surface { background-color: var(--bg-surface); }
.nim-bg-hover { background-color: var(--bg-hover); }
.nim-bg-disabled { background-color: var(--bg-disabled); }

/* Text Colors - Greyscale */
.nim-text-grey-100 { color: var(--grey-100); }
.nim-text-grey-250 { color: var(--grey-250); }
.nim-text-grey-400 { color: var(--grey-400); }
.nim-text-grey-550 { color: var(--grey-550); }
.nim-text-grey-700 { color: var(--grey-700); }
.nim-text-grey-900 { color: var(--grey-900); }

/* Text Colors - Blue */
.nim-text-blue-100 { color: var(--blue-100); }
.nim-text-blue-250 { color: var(--blue-250); }
.nim-text-blue-400 { color: var(--blue-400); }
.nim-text-blue-550 { color: var(--blue-550); }
.nim-text-blue-700 { color: var(--blue-700); }
.nim-text-blue-900 { color: var(--blue-900); }

/* Text Colors - Orange */
.nim-text-orange-100 { color: var(--orange-100); }
.nim-text-orange-250 { color: var(--orange-250); }
.nim-text-orange-400 { color: var(--orange-400); }
.nim-text-orange-550 { color: var(--orange-550); }
.nim-text-orange-700 { color: var(--orange-700); }
.nim-text-orange-900 { color: var(--orange-900); }

/* Border Colors */
.nim-border-grey-250 { border-color: var(--grey-250); }
.nim-border-blue-400 { border-color: var(--blue-400); }
.nim-border-blue-700 { border-color: var(--blue-700); }
.nim-border-orange-550 { border-color: var(--orange-550); }

/* ==========================================
   SPACING UTILITIES (Margin & Padding)
   ========================================== */

/* Margin - All sides */
.nim-m-1  { margin: var(--space-1); }
.nim-m-2  { margin: var(--space-2); }
.nim-m-3  { margin: var(--space-3); }
.nim-m-4  { margin: var(--space-4); }
.nim-m-6  { margin: var(--space-6); }
.nim-m-8  { margin: var(--space-8); }
.nim-m-12 { margin: var(--space-12); }
.nim-m-16 { margin: var(--space-16); }
.nim-m-24 { margin: var(--space-24); }
.nim-m-32 { margin: var(--space-32); }

/* Margin Top */
.nim-mt-1  { margin-top: var(--space-1) !important; }
.nim-mt-2  { margin-top: var(--space-2); }
.nim-mt-3  { margin-top: var(--space-3); }
.nim-mt-4  { margin-top: var(--space-4); }
.nim-mt-6  { margin-top: var(--space-6); }
.nim-mt-8  { margin-top: var(--space-8); }
.nim-mt-12 { margin-top: var(--space-12); }
.nim-mt-16 { margin-top: var(--space-16); }
.nim-mt-24 { margin-top: var(--space-24); }

/* Margin Bottom */
.nim-mb-0  { margin-bottom: 0 !important; }
.nim-mb-1  { margin-bottom: var(--space-1); }
.nim-mb-2  { margin-bottom: var(--space-2); }
.nim-mb-3  { margin-bottom: var(--space-3); }
.nim-mb-4  { margin-bottom: var(--space-4); }
.nim-mb-6  { margin-bottom: var(--space-6); }
.nim-mb-8  { margin-bottom: var(--space-8); }
.nim-mb-12 { margin-bottom: var(--space-12); }
.nim-mb-16 { margin-bottom: var(--space-16); }
.nim-mb-24 { margin-bottom: var(--space-24); }

/* Margin Left */
.nim-ml-1 { margin-left: var(--space-1); }
.nim-ml-2 { margin-left: var(--space-2); }
.nim-ml-3 { margin-left: var(--space-3); }
.nim-ml-4 { margin-left: var(--space-4); }
.nim-ml-6 { margin-left: var(--space-6); }
.nim-ml-8 { margin-left: var(--space-8); }

/* Margin Right */
.nim-mr-1 { margin-right: var(--space-1); }
.nim-mr-2 { margin-right: var(--space-2); }
.nim-mr-3 { margin-right: var(--space-3); }
.nim-mr-4 { margin-right: var(--space-4); }
.nim-mr-6 { margin-right: var(--space-6); }
.nim-mr-8 { margin-right: var(--space-8); }

/* Margin Horizontal (Left + Right) */
.nim-mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.nim-mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.nim-mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.nim-mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.nim-mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.nim-mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.nim-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Vertical (Top + Bottom) */
.nim-my-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.nim-my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.nim-my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.nim-my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.nim-my-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.nim-my-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.nim-my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

/* Padding - All sides */
.nim-p-0  { padding: 0 !important; }
.nim-p-1  { padding: var(--space-1); }
.nim-p-2  { padding: var(--space-2); }
.nim-p-3  { padding: var(--space-3); }
.nim-p-4  { padding: var(--space-4) !important; }
.nim-p-6  { padding: var(--space-6); }
.nim-p-8  { padding: var(--space-8); }
.nim-p-12 { padding: var(--space-12); }
.nim-p-16 { padding: var(--space-16); }

/* Padding Top */
.nim-pt-1 { padding-top: var(--space-1); }
.nim-pt-2 { padding-top: var(--space-2); }
.nim-pt-3 { padding-top: var(--space-3); }
.nim-pt-4 { padding-top: var(--space-4); }
.nim-pt-6 { padding-top: var(--space-6); }
.nim-pt-8 { padding-top: var(--space-8); }

/* Padding Bottom */
.nim-pb-1 { padding-bottom: var(--space-1); }
.nim-pb-2 { padding-bottom: var(--space-2); }
.nim-pb-3 { padding-bottom: var(--space-3); }
.nim-pb-4 { padding-bottom: var(--space-4); }
.nim-pb-6 { padding-bottom: var(--space-6); }
.nim-pb-8 { padding-bottom: var(--space-8); }

/* Padding Horizontal (Left + Right) */
.nim-px-1 { padding-left: var(--space-1)!important; padding-right: var(--space-1) !important; }
.nim-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.nim-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.nim-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.nim-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.nim-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

/* Padding Vertical (Top + Bottom) */
.nim-py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.nim-py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.nim-py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.nim-py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.nim-py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.nim-py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* Gap (for flex/grid) */
.nim-gap-1 { gap: var(--space-1); }
.nim-gap-2 { gap: var(--space-2); }
.nim-gap-3 { gap: var(--space-3); }
.nim-gap-4 { gap: var(--space-4); }
.nim-gap-6 { gap: var(--space-6); }
.nim-gap-8 { gap: var(--space-8); }


/* Padding Left */
.nim-pl-1 { padding-left: var(--space-1); }
.nim-pl-2 { padding-left: var(--space-2); }
.nim-pl-3 { padding-left: var(--space-3); }
.nim-pl-4 { padding-left: var(--space-4); }
.nim-pl-6 { padding-left: var(--space-6); }
.nim-pl-8 { padding-left: var(--space-8); }
.nim-pl-12 {padding-left: var(--space-12);}
.nim-pl-16 {padding-left: var(--space-16);}



  /*--space-12: 3rem;     !* 48px *!*/
  /*--space-16: 4rem;     !* 64px *!*/


/* Padding Right */
.nim-pr-1 { padding-right: var(--space-1); }
.nim-pr-2 { padding-right: var(--space-2); }
.nim-pr-3 { padding-right: var(--space-3); }
.nim-pr-4 { padding-right: var(--space-4); }
.nim-pr-6 { padding-right: var(--space-6); }
.nim-pr-8 { padding-right: var(--space-8); }


/* Width */
.nim-w-1 { width: var(--space-1) !important; }
.nim-w-2 { width: var(--space-2) !important; }
.nim-w-3 { width: var(--space-3) !important; }
.nim-w-4 { width: var(--space-4) !important; }
.nim-w-6 { width: var(--space-6) !important; }
.nim-w-8 { width: var(--space-8) !important; }
.nim-w-12 { width: var(--space-12) !important; }
.nim-w-16 { width: var(--space-16) !important; }
.nim-w-24 { width: var(--space-24) !important; }
.nim-w-32 { width: var(--space-32) !important; }
.nim-w-48 { width: var(--space-48) !important; }
.nim-w-64 { width: var(--space-64) !important; }




/* Height */
.nim-h-1 { height: var(--space-1) !important; }
.nim-h-2 { height: var(--space-2) !important; }
.nim-h-3 { height: var(--space-3) !important; }
.nim-h-4 { height: var(--space-4) !important; }
.nim-h-6 { height: var(--space-6) !important; }
.nim-h-8 { height: var(--space-8) !important; }
.nim-h-12 { height: var(--space-12) !important; }
.nim-h-16 { height: var(--space-16) !important; }
.nim-h-24 { height: var(--space-24) !important; }
.nim-h-32 { height: var(--space-32) !important; }
.nim-h-48 { height: var(--space-48) !important; }
.nim-h-64 { height: var(--space-64) !important; }

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

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

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

/* ==========================================
   SHADOW UTILITIES
   ========================================== */

.nim-shadow-sm { box-shadow: var(--shadow-sm); }
.nim-shadow { box-shadow: var(--shadow-base); }
.nim-shadow-md { box-shadow: var(--shadow-md); }
.nim-shadow-lg { box-shadow: var(--shadow-lg); }
.nim-shadow-xl { box-shadow: var(--shadow-xl); }
.nim-shadow-none { box-shadow: none; }

/* ==========================================
   DISPLAY UTILITIES
   ========================================== */

.nim-block { display: block; }
.nim-inline-block { display: inline-block; }
.nim-inline { display: inline; }
.nim-flex { display: flex; }
.nim-inline-flex { display: inline-flex; }
.nim-grid { display: grid; }
.nim-hidden { display: none; }

/* ==========================================
   FLEXBOX UTILITIES
   ========================================== */

.nim-flex-row { flex-direction: row; }
.nim-flex-col { flex-direction: column; }
.nim-flex-wrap { flex-wrap: wrap; }
.nim-flex-nowrap { flex-wrap: nowrap; }

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

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

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

/* ==========================================
   WIDTH & HEIGHT UTILITIES
   ========================================== */

.nim-w-full { width: 100%; }
.nim-w-auto { width: auto; }
.nim-w-screen { width: 100vw; }

.nim-h-full { height: 100%; }
.nim-h-auto { height: auto; }
.nim-h-screen { height: 100vh; }

.nim-min-h-screen { min-height: 100vh; }
.nim-max-w-screen { max-width: 100vw; }

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

.nim-relative { position: relative; }
.nim-absolute { position: absolute; }
.nim-fixed { position: fixed; }
.nim-sticky { position: sticky; }

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

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

/* ==========================================
   OPACITY UTILITIES
   ========================================== */

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

/* ==========================================
   CURSOR UTILITIES
   ========================================== */

.nim-cursor-pointer { cursor: pointer; }
.nim-cursor-not-allowed { cursor: not-allowed; }
.nim-cursor-default { cursor: default; }

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

.nim-transition-fast { transition: all var(--transition-fast); }
.nim-transition { transition: all var(--transition-base); }
.nim-transition-slow { transition: all var(--transition-slow); }


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

.nim-tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.nim-tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.nim-tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.nim-tracking-wider { letter-spacing: var(--tracking-wider) !important; }
.nim-tracking-widest { letter-spacing: var(--tracking-widest) !important; }