/* Utilities */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
@media (min-width: 768px) {
  .md\:d-none { display: none !important; }
  .md\:d-block { display: block !important; }
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* Text Transforms & Weights */
.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-medium { font-weight: var(--font-weight-medium); }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }

/* Colors */
.text-primary { color: var(--color-primary-600); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success-500); }
.text-error { color: var(--color-error-500); }
.bg-primary { background-color: var(--color-primary-600); color: white; }
.bg-secondary { background-color: var(--color-bg-secondary); }

/* Spacing Helpers (Margins & Paddings) */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-8 { margin-bottom: var(--spacing-8); }
.p-0 { padding: 0; }
.p-4 { padding: var(--spacing-4); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

/* Screen Reader Only */
.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;
}