/* ============================================================================
   SELLIO.MA — UTILITIES
   Deliberately small: only the helpers the app actually uses. NOT a Tailwind
   clone. All values reference tokens from tokens.css.
   Load last (after components.css, and after rtl.css when dir="rtl") so
   utilities win over component defaults without !important.
   ============================================================================ */

/* ---------- spacing (token scale: 8/12/16/20/24/28/32/40) ---------- */
.m-0{margin:0;}
.mt-0{margin-top:0;}
.mt-8{margin-top:var(--s-8);}   .mb-8{margin-bottom:var(--s-8);}
.mt-12{margin-top:var(--s-12);} .mb-12{margin-bottom:var(--s-12);}
.mt-16{margin-top:var(--s-16);} .mb-16{margin-bottom:var(--s-16);}
.mt-20{margin-top:var(--s-20);} .mb-20{margin-bottom:var(--s-20);}
.mt-24{margin-top:var(--s-24);} .mb-24{margin-bottom:var(--s-24);}
.mt-28{margin-top:var(--s-28);} .mb-28{margin-bottom:var(--s-28);}
.mt-32{margin-top:var(--s-32);} .mb-32{margin-bottom:var(--s-32);}
.mt-40{margin-top:var(--s-40);} .mb-40{margin-bottom:var(--s-40);}
.mx-auto{margin-inline:auto;}

.p-0{padding:0;}
.p-8{padding:var(--s-8);}   .p-12{padding:var(--s-12);}  .p-16{padding:var(--s-16);}
.p-20{padding:var(--s-20);} .p-24{padding:var(--s-24);}  .p-28{padding:var(--s-28);}
.p-32{padding:var(--s-32);} .p-40{padding:var(--s-40);}
.px-16{padding-inline:var(--s-16);} .py-16{padding-block:var(--s-16);}
.px-24{padding-inline:var(--s-24);} .py-24{padding-block:var(--s-24);}

/* vertical stacks */
.stack-8{display:flex;flex-direction:column;gap:var(--s-8);}
.stack-12{display:flex;flex-direction:column;gap:var(--s-12);}
.stack-16{display:flex;flex-direction:column;gap:var(--s-16);}
.stack-24{display:flex;flex-direction:column;gap:var(--s-24);}
.stack-32{display:flex;flex-direction:column;gap:var(--s-32);}

/* gaps for flex/grid containers */
.gap-8{gap:var(--s-8);}  .gap-12{gap:var(--s-12);} .gap-16{gap:var(--s-16);}
.gap-20{gap:var(--s-20);}.gap-24{gap:var(--s-24);} .gap-32{gap:var(--s-32);}

/* ---------- text sizes (docs type scale) ---------- */
.t-xs{font-size:.6875rem;}      /* 11px */
.t-sm{font-size:.78125rem;}     /* 12.5px */
.t-base{font-size:.875rem;}     /* 14px */
.t-md{font-size:.9375rem;}      /* 15px — body */
.t-lg{font-size:1.1875rem;}     /* 19px — h4 */
.t-xl{font-size:1.5rem;}        /* 24px — h3 */
.t-2xl{font-size:1.875rem;}     /* 30px — h2 */
.t-3xl{font-size:2.75rem;}      /* 44px — h1 */

/* ---------- weights ---------- */
.w-400{font-weight:400;}
.w-600{font-weight:600;}
.w-700{font-weight:700;}
.w-800{font-weight:800;}
.w-900{font-weight:900;}

/* ---------- colours ---------- */
.c-primary{color:var(--text-primary);}
.c-secondary{color:var(--text-secondary);}
.c-muted{color:var(--gray-1);}
.c-red{color:var(--red);}
.c-blue{color:var(--blue);}
.c-white{color:var(--white);}
.c-ok{color:var(--ok);}
.c-warn{color:var(--warn);}
.c-err{color:var(--text-error);}
.bg-page{background:var(--bg-secondary);}
.bg-surface{background:var(--white);}

/* ---------- flex / grid helpers ---------- */
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.flex-1{flex:1;}
.flex-wrap{flex-wrap:wrap;}
.inline-flex{display:inline-flex;}
.block{display:block;}
.inline-block{display:inline-block;}
.hidden{display:none;}

/* grid column spans (match base.css .g2/.g3/.g4) */
.col-span-full{grid-column:1/-1;}
@media(min-width:900px){
  .col-span-2{grid-column:span 2;}
  .col-span-3{grid-column:span 3;}
}

/* ---------- widths / measure ---------- */
.w-full{width:100%;}
.w-auto{width:auto;}
.w-1\/2{width:50%;}
.max-w-sm{max-width:360px;}     /* docs auth-card measure */
.max-w-md{max-width:420px;}     /* docs modal measure */
.max-w-lg{max-width:640px;}     /* docs page-head paragraph measure */
.max-w-xl{max-width:768px;}
.max-w-2xl{max-width:1024px;}
.max-w-full{max-width:100%;}

/* ---------- text behaviour / alignment ---------- */
.text-center{text-align:center;}
.text-start{text-align:start;}
.text-end{text-align:end;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nowrap{white-space:nowrap;}
.break-words{overflow-wrap:break-word;}
.uppercase{text-transform:uppercase;}

/* ---------- visibility / a11y ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.pointer-none{pointer-events:none;}

/* ---------- radius / elevation (token-backed) ---------- */
.rounded-sm{border-radius:var(--r-sm);}
.rounded-btn{border-radius:var(--r-btn);}
.rounded-card{border-radius:var(--r-card);}
.rounded-pill{border-radius:var(--r-pill);}
.shadow-subtle{box-shadow:var(--shadow-subtle);}
.shadow-med{box-shadow:var(--shadow-med);}
.shadow-high{box-shadow:var(--shadow-high);}

/* ---------- touch target ---------- */
.min-tap{min-width:var(--tap);min-height:var(--tap);}