/* =========================================
   CLIENTSIDETOOLS UTILITIES
   ========================================= */

/* --- Spacing (Margins & Padding) --- */
.m-0 { margin: 0; } .p-0 { padding: 0; }
.mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); }
.mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); } .mb-6 { margin-bottom: var(--space-6); }
.mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); }

.pt-4 { padding-top: var(--space-4); } .pb-4 { padding-bottom: var(--space-4); }
.pt-8 { padding-top: var(--space-8); } .pb-8 { padding-bottom: var(--space-8); }

/* --- Typography --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

.font-normal { font-weight: var(--fw-normal); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold { font-weight: var(--fw-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand-primary); }

/* --- Display & Visibility --- */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* --- Accessibility --- */
/* Visually hides content but keeps it accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}