/* ============================================================================
   BIF — Design System · Utilities
   ----------------------------------------------------------------------------
   Clases utilitarias propias (no-Tailwind). Naming corto con prefijo `u-`.
   ============================================================================ */

/* ──────────── Display ──────────── */
.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; }

@media (min-width: 768px)  { .u-md-flex    { display: flex; }    .u-md-hidden  { display: none; } }
@media (min-width: 1024px) { .u-lg-flex    { display: flex; }    .u-lg-hidden  { display: none; }
                              .u-lg-grid    { display: grid; } }

/* ──────────── Flex ──────────── */
.u-flex-col     { flex-direction: column; }
.u-flex-row     { flex-direction: row; }
.u-flex-wrap    { flex-wrap: wrap; }
.u-flex-1       { flex: 1; }

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

.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-justify-around   { justify-content: space-around; }

/* ──────────── Gap ──────────── */
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-5 { gap: var(--sp-5); }
.u-gap-6 { gap: var(--sp-6); }
.u-gap-7 { gap: var(--sp-7); }
.u-gap-8 { gap: var(--sp-8); }

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

/* ──────────── Text style ──────────── */
.u-uppercase    { text-transform: uppercase; }
.u-capitalize   { text-transform: capitalize; }
.u-nowrap       { white-space: nowrap; }

/* ──────────── Font family ──────────── */
.u-font-display { font-family: var(--font-display); letter-spacing: var(--ls-wide); }
.u-font-body    { font-family: var(--font-body); }
.u-font-mono    { font-family: var(--font-mono); }

/* ──────────── Font weight ──────────── */
.u-fw-regular   { font-weight: var(--fw-regular); }
.u-fw-medium    { font-weight: var(--fw-medium); }
.u-fw-semibold  { font-weight: var(--fw-semibold); }
.u-fw-bold      { font-weight: var(--fw-bold); }
.u-fw-black     { font-weight: var(--fw-black); }

/* ──────────── Font size ──────────── */
.u-fs-xs        { font-size: var(--fs-xs); }
.u-fs-sm        { font-size: var(--fs-sm); }
.u-fs-base      { font-size: var(--fs-base); }
.u-fs-lg        { font-size: var(--fs-lg); }
.u-fs-xl        { font-size: var(--fs-xl); }
.u-fs-2xl       { font-size: var(--fs-2xl); }
.u-fs-3xl       { font-size: var(--fs-3xl); }
.u-fs-4xl       { font-size: var(--fs-4xl); }

/* ──────────── Colors ──────────── */
.u-c-white      { color: var(--bif-white); }
.u-c-bone       { color: var(--bif-bone); }
.u-c-ash        { color: var(--bif-ash); }
.u-c-smoke      { color: var(--bif-smoke); }
.u-c-fire       { color: var(--bif-fire); }
.u-c-blood      { color: var(--bif-blood); }
.u-c-gold       { color: var(--bif-gold); }
.u-c-success    { color: var(--bif-success); }
.u-c-danger     { color: var(--bif-danger); }

/* ──────────── Backgrounds ──────────── */
.u-bg-black     { background: var(--bif-black); }
.u-bg-charcoal  { background: var(--bif-charcoal); }
.u-bg-graphite  { background: var(--bif-graphite); }
.u-bg-blood     { background: var(--bif-blood); }
.u-bg-fire      { background: var(--bif-fire); }

/* ──────────── Margin (m, mt, mb, mx, my) ──────────── */
.u-m-0 { margin: 0; }
.u-mt-1 { margin-top: var(--sp-1); }  .u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }  .u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }  .u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }  .u-mt-8 { margin-top: var(--sp-8); }

.u-mb-1 { margin-bottom: var(--sp-1); }  .u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }  .u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }  .u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-7 { margin-bottom: var(--sp-7); }  .u-mb-8 { margin-bottom: var(--sp-8); }

/* ──────────── Padding ──────────── */
.u-p-0 { padding: 0; }
.u-p-3 { padding: var(--sp-3); }   .u-p-4 { padding: var(--sp-4); }
.u-p-5 { padding: var(--sp-5); }   .u-p-6 { padding: var(--sp-6); }

/* ──────────── Width / Height ──────────── */
.u-w-full       { width: 100%; }
.u-h-full       { height: 100%; }
.u-min-h-screen { min-height: 100vh; }
.u-max-w-prose  { max-width: 65ch; }

/* ──────────── Position ──────────── */
.u-relative     { position: relative; }
.u-absolute     { position: absolute; }
.u-fixed        { position: fixed; }
.u-sticky       { position: sticky; }
.u-inset-0      { inset: 0; }

/* ──────────── Z-index ──────────── */
.u-z-base       { z-index: var(--z-base); }
.u-z-content    { z-index: var(--z-content); }
.u-z-header     { z-index: var(--z-header); }

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

/* ──────────── Border ──────────── */
.u-border       { border: var(--border-thin); }
.u-border-t     { border-top: var(--border-thin); }
.u-border-b     { border-bottom: var(--border-thin); }
.u-border-none  { border: none; }

/* ──────────── Effects ──────────── */
.u-glow-red     { box-shadow: var(--bif-glow-red); }
.u-glow-gold    { box-shadow: var(--bif-glow-gold); }

/* ──────────── Cursor / Interacción ──────────── */
.u-cursor-pointer   { cursor: pointer; }
.u-pointer-none     { pointer-events: none; }
.u-select-none      { user-select: none; }