/* ═══════════════════════════════════════════════════════════════════════
   utilities.css · Single-purpose helper classes

   Naming: .u-{property}-{value}
   These override component styles when needed.
   Use sparingly — prefer component variants over utility stacking.

   Contents:
   1. Spacing (margin, padding)
   2. Display & Visibility
   3. Text alignment & transforms
   4. Flexbox shortcuts
   5. Colors (text, background)
   6. Borders
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1. SPACING
   ═══════════════════════════════════════════════════════════════════════ */

/* Margin top */
.u-mt-0{margin-top:0}
.u-mt-1{margin-top:.5rem}
.u-mt-2{margin-top:1rem}
.u-mt-3{margin-top:1.5rem}
.u-mt-4{margin-top:2rem}
.u-mt-5{margin-top:3rem}

/* Margin bottom */
.u-mb-0{margin-bottom:0}
.u-mb-1{margin-bottom:.5rem}
.u-mb-2{margin-bottom:1rem}
.u-mb-3{margin-bottom:1.5rem}
.u-mb-4{margin-bottom:2rem}
.u-mb-5{margin-bottom:3rem}

/* Margin auto */
.u-mx-auto{margin-inline:auto}
.u-ml-auto{margin-left:auto}
.u-mr-auto{margin-right:auto}

/* Padding */
.u-p-0{padding:0}
.u-p-1{padding:.5rem}
.u-p-2{padding:1rem}
.u-p-3{padding:1.5rem}
.u-p-4{padding:2rem}

/* Gap (for flex/grid) */
.u-gap-1{gap:.5rem}
.u-gap-2{gap:1rem}
.u-gap-3{gap:1.5rem}
.u-gap-4{gap:2rem}


/* ═══════════════════════════════════════════════════════════════════════
   2. DISPLAY & VISIBILITY
   ═══════════════════════════════════════════════════════════════════════ */

.u-block{display:block}
.u-inline{display:inline}
.u-inline-block{display:inline-block}
.u-flex{display:flex}
.u-inline-flex{display:inline-flex}
.u-grid{display:grid}
.u-hidden{display:none}
.u-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* Responsive visibility */
@media (max-width:768px){
  .u-hide-mobile{display:none !important}
}
@media (min-width:769px){
  .u-hide-desktop{display:none !important}
}


/* ═══════════════════════════════════════════════════════════════════════
   3. TEXT
   ═══════════════════════════════════════════════════════════════════════ */

/* Alignment */
.u-text-left{text-align:left}
.u-text-center{text-align:center}
.u-text-right{text-align:right}

/* Transform */
.u-uppercase{text-transform:uppercase}
.u-lowercase{text-transform:lowercase}
.u-capitalize{text-transform:capitalize}
.u-normal-case{text-transform:none}

/* Style */
.u-italic{font-style:italic}
.u-bold{font-weight:700}
.u-normal{font-weight:400}

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

/* Line height */
.u-leading-tight{line-height:1.2}
.u-leading-normal{line-height:1.5}
.u-leading-loose{line-height:1.8}


/* ═══════════════════════════════════════════════════════════════════════
   4. FLEXBOX
   ═══════════════════════════════════════════════════════════════════════ */

.u-flex-row{flex-direction:row}
.u-flex-col{flex-direction:column}
.u-flex-wrap{flex-wrap:wrap}
.u-flex-nowrap{flex-wrap:nowrap}

.u-items-start{align-items:flex-start}
.u-items-center{align-items:center}
.u-items-end{align-items:flex-end}
.u-items-baseline{align-items:baseline}

.u-justify-start{justify-content:flex-start}
.u-justify-center{justify-content:center}
.u-justify-end{justify-content:flex-end}
.u-justify-between{justify-content:space-between}

.u-flex-1{flex:1}
.u-flex-shrink-0{flex-shrink:0}


/* ═══════════════════════════════════════════════════════════════════════
   5. COLORS
   ═══════════════════════════════════════════════════════════════════════ */

/* Text colors */
.u-color-ink{color:var(--ink)}
.u-color-soft{color:var(--ink-soft)}
.u-color-mute{color:var(--mute)}
.u-color-accent{color:var(--accent)}

/* Background colors */
.u-bg-default{background:var(--bg)}
.u-bg-tint{background:var(--bg-tint)}
.u-bg-ink{background:var(--ink);color:var(--reverse)}


/* ═══════════════════════════════════════════════════════════════════════
   6. BORDERS
   ═══════════════════════════════════════════════════════════════════════ */

.u-border{border:1px solid var(--rule)}
.u-border-t{border-top:1px solid var(--rule)}
.u-border-b{border-bottom:1px solid var(--rule)}
.u-border-0{border:0}

.u-border-stronger{border-color:var(--rule-stronger)}
.u-border-accent{border-color:var(--accent)}


/* ═══════════════════════════════════════════════════════════════════════
   7. SIZING
   ═══════════════════════════════════════════════════════════════════════ */

.u-w-full{width:100%}
.u-h-full{height:100%}
.u-max-w-prose{max-width:65ch}
.u-max-w-narrow{max-width:480px}
.u-max-w-medium{max-width:680px}
.u-max-w-wide{max-width:960px}


/* ═══════════════════════════════════════════════════════════════════════
   8. POSITION
   ═══════════════════════════════════════════════════════════════════════ */

.u-relative{position:relative}
.u-absolute{position:absolute}
.u-fixed{position:fixed}
.u-sticky{position:sticky}