/* ═══════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════ */

/* ─── Text Alignment ─── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* ─── Text Size ─── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* ─── Text Color ─── */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }

/* ─── Font Weight ─── */
.font-normal    { font-weight: var(--font-normal); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }

/* ─── Font Family ─── */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* ─── Line Height ─── */
.leading-none   { line-height: var(--leading-none); }
.leading-tight  { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }

/* ─── Letter Spacing ─── */
.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }

/* ─── Truncate ─── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Whitespace ─── */
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words  { overflow-wrap: break-word; }
.break-all    { word-break: break-all; }

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

.mt-0  { margin-top: 0; }
.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); }

.mb-0  { margin-bottom: 0; }
.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; }

/* ─── Padding ─── */
.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-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.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-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ─── Gap ─── */
.gap-0   { gap: 0; }
.gap-1   { gap: var(--space-1); }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* ─── Width / Height ─── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }

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

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

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

/* ─── Pointer Events ─── */
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

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

/* ─── Opacity ─── */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ─── Border Radius ─── */
.rounded-none  { border-radius: var(--radius-none); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-2xl   { border-radius: var(--radius-2xl); }
.rounded-full  { border-radius: var(--radius-full); }

/* ─── Border ─── */
.border        { border: 1px solid var(--color-border); }
.border-0      { border: none; }
.border-b      { border-bottom: 1px solid var(--color-divider); }
.border-t      { border-top: 1px solid var(--color-divider); }
.border-primary { border-color: var(--color-primary); }
.border-danger  { border-color: var(--color-danger); }

/* ─── Shadow ─── */
.shadow-xs  { box-shadow: var(--shadow-xs); }
.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); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-none { box-shadow: none; }

/* ─── 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: 0;
}

/* ─── Visibility ─── */
.visible    { visibility: visible; }
.invisible  { visibility: hidden; }

/* ─── User Select ─── */
.select-none  { user-select: none; }
.select-all   { user-select: all; }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .hidden-mobile { display: none !important; }
  .block-mobile  { display: block !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hidden-tablet { display: none !important; }
}

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