/* ============================================================
   CITANT.AI — utilities.css v1.1
   Single-purpose helper classes. No component logic here.
   Depends on: all preceding CSS files
   Load order: ... → components.css → THIS FILE → page-specific
   ============================================================ */

/*
 * BREAKPOINTS (reference — media queries use min-width mobile-first):
 *   640px  — large phones and small tablets
 *   900px  — tablets and small laptops
 *  1100px  — standard desktops
 */

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

/* Gradient text — applied with class="u-text-gradient" on span inside heading */
.u-text-gradient {
  background:              var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  color:                   transparent;
}

/* Text alignment */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

/* Text color utilities */
.u-text-muted   { color: var(--color-text-muted); }
.u-text-white   { color: var(--color-text-white); }
.u-text-primary { color: var(--color-primary); }

/* ============================================================
   DISPLAY UTILITIES
   ============================================================ */

.u-visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Show/hide at breakpoints */
.u-hide-mobile  { display: none; }
.u-hide-desktop { display: block; }

@media (min-width: 640px) {
  .u-hide-mobile  { display: block; }
  .u-hide-desktop { display: none; }
}

/* ============================================================
   SPACING UTILITIES
   ============================================================ */

/* Margin top helpers (for spacing between stacked sections) */
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }

/* Margin bottom helpers */
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mb-12 { margin-bottom: var(--space-12); }

/* ============================================================
   BADGE / PILL UTILITIES
   ============================================================ */

.u-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
}

.u-badge--success {
  background: var(--color-success-bg);
  color:      var(--color-success);
}

.u-badge--primary {
  background: var(--color-primary-light);
  color:      var(--color-primary);
}

.u-badge--warning {
  background: var(--color-warning-bg);
  color:      var(--color-warning);
}

/* ============================================================
   SKIP LINK (accessibility — keyboard users)
   Appears on Tab press at top of page.
   ============================================================ */

.skip-link {
  position:        absolute;
  top:             -100px;
  left:            var(--space-4);
  background:      var(--color-primary);
  color:           var(--color-text-white);
  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius-sm);
  font-weight:     var(--weight-semibold);
  z-index:         var(--z-toast);
  text-decoration: none;
  transition:      top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}