/* ═══════════════════════════════════════════════════════════════════
   CricBun Utility Classes
   ═══════════════════════════════════════════════════════════════════ */

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

.cb-text-center { text-align: center; }
.cb-text-left { text-align: left; }
.cb-text-right { text-align: right; }

.cb-text-secondary { color: var(--cb-text-secondary); }
.cb-text-tertiary { color: var(--cb-text-tertiary); }
.cb-text-primary { color: var(--cb-primary); }
.cb-text-success { color: var(--cb-success); }
.cb-text-accent { color: var(--cb-accent); }

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

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

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

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

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

/* ── Spacing ── */
.cb-m-0 { margin: 0; }
.cb-mt-0 { margin-top: 0; }
.cb-mb-0 { margin-bottom: 0; }
.cb-mt-sm { margin-top: var(--cb-space-sm); }
.cb-mt-base { margin-top: var(--cb-space-base); }
.cb-mt-lg { margin-top: var(--cb-space-lg); }
.cb-mt-xl { margin-top: var(--cb-space-xl); }
.cb-mb-sm { margin-bottom: var(--cb-space-sm); }
.cb-mb-base { margin-bottom: var(--cb-space-base); }
.cb-mb-lg { margin-bottom: var(--cb-space-lg); }

.cb-p-0 { padding: 0; }
.cb-p-sm { padding: var(--cb-space-sm); }
.cb-p-base { padding: var(--cb-space-base); }
.cb-p-lg { padding: var(--cb-space-lg); }

/* ── Display ── */
.cb-d-none { display: none; }
.cb-d-block { display: block; }
.cb-d-flex { display: flex; }
.cb-d-grid { display: grid; }
.cb-d-inline { display: inline; }
.cb-d-inline-flex { display: inline-flex; }

@media (max-width: 767px) {
  .cb-d-none-mobile { display: none !important; }
  .cb-d-block-mobile { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cb-d-none-tablet { display: none !important; }
}

@media (min-width: 992px) {
  .cb-d-none-desktop { display: none !important; }
  .cb-d-block-desktop { display: block !important; }
}

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

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

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

/* ── Visually Hidden (Screen Reader Only) ── */
.cb-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;
}

/* ── Aspect Ratio ── */
.cb-aspect-16-9 { aspect-ratio: 16 / 9; }
.cb-aspect-4-3 { aspect-ratio: 4 / 3; }
.cb-aspect-1-1 { aspect-ratio: 1 / 1; }
.cb-aspect-3-2 { aspect-ratio: 3 / 2; }

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

/* ── Background ── */
.cb-bg-alt { background: var(--cb-bg-alt); }
.cb-bg-subtle { background: var(--cb-bg-subtle); }
.cb-bg-primary { background: var(--cb-primary); }
.cb-bg-primary-light { background: var(--cb-primary-light); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}