/* ============================================
   RAAHI — Utility Classes
   ============================================ */

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

@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
  .show-desktop-only { display: none !important; }
}

@media (min-width: 1024px) {
  .show-mobile-only { display: none !important; }
}

/* ── Spacing ── */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ── Sizing ── */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ── Border ── */
.border { border: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Background ── */
.bg-white { background: var(--color-white); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-tertiary { background: var(--color-bg-tertiary); }
.bg-primary-50 { background: var(--color-primary-50); }

/* ── Shadow ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ── Selection ── */
.select-none { user-select: none; }

/* ── Opacity ── */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ── Visually Hidden (accessible) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}