/* utilities.css */
/* ================================
   UTILITIES
   ================================ */

/* ================================
   TEXT
   ================================ */

   .text-center { text-align: center; }
   .text-left { text-align: left; }
   .text-right { text-align: right; }
   
   .text-light { color: var(--color-light); }
   .text-dark { color: var(--color-dark); }
   .text-primary { color: var(--color-primary); }
   .text-secondary { color: var(--color-secondary); }
   .text-muted { color: var(--color-gray); }
   
   .text-uppercase { text-transform: uppercase; }
   .text-bold { font-weight: 700; }
   .text-semibold { font-weight: 600; }
   
   /* ================================
      SPACING
      ================================ */
   
   .mt-xs { margin-top: var(--space-xs); }
   .mt-sm { margin-top: var(--space-sm); }
   .mt-md { margin-top: var(--space-md); }
   .mt-lg { margin-top: var(--space-lg); }
   .mt-xl { margin-top: var(--space-xl); }
   
   .mb-xs { margin-bottom: var(--space-xs); }
   .mb-sm { margin-bottom: var(--space-sm); }
   .mb-md { margin-bottom: var(--space-md); }
   .mb-lg { margin-bottom: var(--space-lg); }
   .mb-xl { margin-bottom: var(--space-xl); }
   
   .pt-sm { padding-top: var(--space-sm); }
   .pt-md { padding-top: var(--space-md); }
   .pt-lg { padding-top: var(--space-lg); }
   
   .pb-sm { padding-bottom: var(--space-sm); }
   .pb-md { padding-bottom: var(--space-md); }
   .pb-lg { padding-bottom: var(--space-lg); }
   
   /* ================================
      DISPLAY
      ================================ */
   
   .flex { display: flex; }
   .inline-flex { display: inline-flex; }
   .grid { display: grid; }
   .block { display: block; }
   
   .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .flex-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   /* ================================
      SIZING
      ================================ */
   
   .w-100 { width: 100%; }
   .h-100 { height: 100%; }
   
   /* ================================
      VISIBILITY
      ================================ */
   
   .hidden { display: none !important; }
   .visible { display: block !important; }
   
   /* ================================
      POSITION
      ================================ */
   
   .relative { position: relative; }
   .absolute { position: absolute; }
   .fixed { position: fixed; }
   
   /* ================================
      OVERFLOW
      ================================ */
   
   .overflow-hidden { overflow: hidden; }
   
   /* ================================
      CURSOR
      ================================ */
   
   .cursor-pointer { cursor: pointer; }
   .no-scroll {
      overflow: hidden;
    }