/* ==========================================================================
   UTILITY CLASSES
   Atomic helper classes for layout, spacing, typography, and colors.
   These complement the ITCSS component layers (01-04).
   ========================================================================== */

/* ========================================================================
   SPACING
   ======================================================================== */
.m-0   { margin: 0; }
.mt-0  { margin-top: 0; }
.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); }
.mr-2  { margin-right: var(--space-2); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ========================================================================
   LAYOUT
   ======================================================================== */
.block       { display: block; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

/* ========================================================================
   WIDTH / SIZING
   ======================================================================== */
.max-w-2xl { max-width: 42rem; }  /* ~672px */
.max-w-3xl { max-width: 48rem; }  /* ~768px */

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */
.text-center { text-align: center; }
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg  { font-size: var(--text-lg); }
.text-3xl { font-size: var(--text-3xl); }
.text-5xl { font-size: 3rem; }      /* 48px for large icons/headings */
.leading-relaxed { line-height: var(--leading-relaxed); }
.font-bold { font-weight: 700; }

/* ========================================================================
   COLORS
   ======================================================================== */
.text-primary  { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent-primary { color: var(--accent-primary); }
.text-accent-cyan { color: var(--accent-cyan); }
.text-accent-green { color: var(--accent-green); }

.bg-accent-primary { background: var(--accent-primary); }
.bg-accent-cyan { background: var(--accent-cyan); }

/* ========================================================================
   COMPONENT PATTERNS ( commonly repeated inline-style groups )
   ======================================================================== */

/* Full-width flex child with zero margin */
.flex-1-m0 {
  flex: 1;
  margin: 0;
}

/* Header row inside cards: flex + centered + gap + bottom margin */
.flex-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Circular step number badge */
.step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* Small info / tip box */
.info-box {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

/* Additional spacing */
.mt-3  { margin-top: var(--space-3); }
.pt-6  { padding-top: var(--space-6); }
.pt-10 { padding-top: var(--space-10); }
.mr-3  { margin-right: var(--space-3); }

/* Display & layout */
.inline-block { display: inline-block; }

/* Typography modifiers */
.italic { font-style: italic; }
.font-semibold { font-weight: 600; }

/* Additional colors */
.text-muted { color: var(--text-muted); }
.text-accent-violet { color: var(--accent-violet); }
.text-accent-orange { color: var(--accent-orange); }
.bg-accent-violet { background: var(--accent-violet); }

/* Borders */
.border-top-dashed { border-top: 2px dashed var(--border-primary); }

/* Background variants for info-box */
.info-box--cyan {
  background: rgba(57, 208, 216, 0.1);
}

.info-box--primary {
  background: rgba(88, 166, 255, 0.1);
}

/* Additional colors */
.text-accent-pink { color: var(--accent-pink); }
.text-accent-red { color: var(--accent-red); }
.bg-accent-pink { background: var(--accent-pink); }
.bg-accent-red { background: var(--accent-red); }

.mt-12 { margin-top: var(--space-12); }
.hidden { display: none; }