/* Utility classes for consistent styling */

.flex {
  display: flex;
}

.flexCol {
  flex-direction: column;
}

.itemsCenter {
  align-items: center;
}

.justifyCenter {
  justify-content: center;
}

.justifyBetween {
  justify-content: space-between;
}

.gap1 { gap: 4px; }
.gap2 { gap: 8px; }
.gap3 { gap: 12px; }
.gap4 { gap: 16px; }
.gap5 { gap: 20px; }

.m0 { margin: 0; }
.mt1 { margin-top: 4px; }
.mt2 { margin-top: 8px; }
.mt3 { margin-top: 12px; }
.mt4 { margin-top: 16px; }
.mt5 { margin-top: 20px; }

.mb1 { margin-bottom: 4px; }
.mb2 { margin-bottom: 8px; }
.mb3 { margin-bottom: 12px; }
.mb4 { margin-bottom: 16px; }
.mb5 { margin-bottom: 20px; }

.p0 { padding: 0; }
.p1 { padding: 4px; }
.p2 { padding: 8px; }
.p3 { padding: 12px; }
.p4 { padding: 16px; }
.p5 { padding: 20px; }

.textXs { font-size: 12px; }
.textSm { font-size: 14px; }
.textBase { font-size: 16px; }
.textLg { font-size: 18px; }
.textXl { font-size: 20px; }
.text2Xl { font-size: 24px; }

.fontNormal { font-weight: 400; }
.fontMedium { font-weight: 500; }
.fontSemibold { font-weight: 600; }
.fontBold { font-weight: 700; }

.textPrimary { color: var(--primary-color); }
.textSecondary { color: var(--text-secondary); }
.textMuted { color: var(--text-muted); }
.textSuccess { color: var(--success-color); }
.textDanger { color: var(--danger-color); }
.textWarning { color: var(--warning-color); }

.bgWhite { background-color: var(--bg-color); }
.bgCard { background-color: var(--card-bg); }
.bgSuccessLight { background-color: var(--success-light); }
.bgDangerLight { background-color: var(--danger-light); }
.bgWarningLight { background-color: var(--warning-light); }